16 changed files with 1448 additions and 178 deletions
@ -0,0 +1,101 @@ |
|||
<template> |
|||
<div :class="{'hidden':hidden}" class="pagination-container"> |
|||
<el-pagination |
|||
:background="background" |
|||
:current-page.sync="currentPage" |
|||
:page-size.sync="pageSize" |
|||
:layout="layout" |
|||
:page-sizes="pageSizes" |
|||
:total="total" |
|||
v-bind="$attrs" |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { scrollTo } from '@/utils/scroll-to' |
|||
|
|||
export default { |
|||
name: 'Pagination', |
|||
props: { |
|||
total: { |
|||
required: true, |
|||
type: Number |
|||
}, |
|||
page: { |
|||
type: Number, |
|||
default: 1 |
|||
}, |
|||
limit: { |
|||
type: Number, |
|||
default: 20 |
|||
}, |
|||
pageSizes: { |
|||
type: Array, |
|||
default() { |
|||
return [5, 20, 50, 100, 200 , 500] |
|||
} |
|||
}, |
|||
layout: { |
|||
type: String, |
|||
default: 'total, sizes, prev, pager, next, jumper' |
|||
}, |
|||
background: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
autoScroll: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
hidden: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
computed: { |
|||
currentPage: { |
|||
get() { |
|||
return this.page |
|||
}, |
|||
set(val) { |
|||
this.$emit('update:page', val) |
|||
} |
|||
}, |
|||
pageSize: { |
|||
get() { |
|||
return this.limit |
|||
}, |
|||
set(val) { |
|||
this.$emit('update:limit', val) |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
handleSizeChange(val) { |
|||
this.$emit('pagination', { page: this.currentPage, limit: val }) |
|||
if (this.autoScroll) { |
|||
scrollTo(0, 800) |
|||
} |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.$emit('pagination', { page: val, limit: this.pageSize }) |
|||
if (this.autoScroll) { |
|||
scrollTo(0, 800) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.pagination-container { |
|||
background: #fff; |
|||
padding: 32px 16px; |
|||
} |
|||
.pagination-container.hidden { |
|||
display: none; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,614 @@ |
|||
<template> |
|||
<div class="sn" :class="show ? 'sn_show' : ''"> |
|||
|
|||
<!-- 1 --> |
|||
<!-- <div v-if="!show"> |
|||
<el-collapse @change="handleChange"> |
|||
<el-collapse-item title="今日收费TOP5" name="1"> |
|||
<div> |
|||
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="0.5rem" > |
|||
<el-form-item label="省份" prop="province"> |
|||
<el-select v-model="queryParams.province" placeholder="请选择省份" clearable size="small" |
|||
@change="areaDropDown"> |
|||
<el-option v-for="(item, i) in provinceOption" :key="i" :label="item.label" :value="item.label"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="城市" prop="city"> |
|||
<el-select v-model="queryParams.city" placeholder="请选择城市" clearable size="small" @change="areaDropDown"> |
|||
<el-option v-for="(item, i) in cityOption" :key="i" :label="item.label" :value="item.label"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="区域" prop="county"> |
|||
<el-select v-model="queryParams.county" placeholder="请选择区域" clearable size="small"> |
|||
<el-option v-for="(item, i) in countyOption" :key="i" :label="item.label" :value="item.label"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<div class="search"> |
|||
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button> |
|||
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
</el-collapse-item> |
|||
</el-collapse> |
|||
<div class="sn-body"> |
|||
<div class="table-header"> |
|||
<span style="width: 1rem">排行</span> |
|||
<span style="width: 2rem">停车场名称</span> |
|||
<span style="width: 2.1rem">收费金额</span> |
|||
<span style="width: .8rem">操作</span> |
|||
</div> |
|||
<vue-seamless-scroll :data="listData2" class="seamless-warp" :class-option="optionSetting"> |
|||
<div class="line" v-for="(item, index) in listData2" :key="index" |
|||
:class="item.accessType === '入场' ? 'in' : ''"> |
|||
<span class="td" v-if="index == 0" style="width: 1rem"><img src="/img/img3.png" alt=""></span> |
|||
<span class="td" v-if="index == 1" style="width: 1rem"><img src="/img/img4.png" alt=""></span> |
|||
<span class="td" v-if="index == 2" style="width: 1rem"><img src="/img/img5.png" alt=""></span> |
|||
<span class="td" v-if="index == 3" style="width: 1rem"><img src="/img/img6.png" alt=""></span> |
|||
<span class="td" v-if="index == 4" style="width: 1rem"><img src="/img/img7.png" alt=""></span> |
|||
<el-tooltip class="item" effect="dark" :content="item.parkingInfoName" placement="top"> |
|||
<span style="width: 2rem" class='title'>{{ item.parkingInfoName }}</span> |
|||
</el-tooltip> |
|||
<span style="width: 2.1rem">{{ item.totalAmount }}元</span> |
|||
<span style="width: .8rem" @click="toGo(item, index)">详情</span> |
|||
</div> |
|||
</vue-seamless-scroll> |
|||
</div> |
|||
</div> --> |
|||
|
|||
<!-- 2 --> |
|||
<div> |
|||
<el-collapse v-model="activeNames" @change="handleChange"> |
|||
<el-collapse-item title="今日收费TOP5" name="1"> |
|||
<div> |
|||
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="0.5rem"> |
|||
<el-form-item label="省份" prop="province"> |
|||
<el-select v-model="queryParams.province" placeholder="请选择省份" clearable size="small" |
|||
@change="areaDropDown"> |
|||
<el-option v-for="(item, i) in provinceOption" :key="i" :label="item.label" :value="item.label"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="城市" prop="city"> |
|||
<el-select v-model="queryParams.city" placeholder="请选择城市" clearable size="small" @change="areaDropDown"> |
|||
<el-option v-for="(item, i) in cityOption" :key="i" :label="item.label" :value="item.label"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="区域" prop="county"> |
|||
<el-select v-model="queryParams.county" placeholder="请选择区域" clearable size="small"> |
|||
<el-option v-for="(item, i) in countyOption" :key="i" :label="item.label" :value="item.label"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<div class="search"> |
|||
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button> |
|||
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button> |
|||
<el-button type="warning" icon="el-icon-refresh" size="small" @click="toGo('', '', false)">查看全部 |
|||
</el-button> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
</el-collapse-item> |
|||
</el-collapse> |
|||
<div class="sn-body"> |
|||
<div class="table-header"> |
|||
<span style="width: 1rem">排行</span> |
|||
<span style="width: 2rem">停车场名称</span> |
|||
<span style="width: 2.1rem">收费金额</span> |
|||
<span style="width: .8rem">操作</span> |
|||
</div> |
|||
<div class="seamless-warp" :class="show ? 'sn_scroll' : ''"> |
|||
<div class="line" v-for="(item, index) in listData2" :key="index" |
|||
:class="item.accessType === '入场' ? 'in' : ''"> |
|||
<span class="td" v-if="index == 0" style="width: 1rem"><img src="/img/img3.png" alt=""></span> |
|||
<span class="td" v-if="index == 1" style="width: 1rem"><img src="/img/img4.png" alt=""></span> |
|||
<span class="td" v-if="index == 2" style="width: 1rem"><img src="/img/img5.png" alt=""></span> |
|||
<span class="td" v-if="index == 3" style="width: 1rem"><img src="/img/img6.png" alt=""></span> |
|||
<span class="td" v-if="index == 4" style="width: 1rem"><img src="/img/img7.png" alt=""></span> |
|||
<el-tooltip class="item" effect="dark" :content="item.parkingInfoName" placement="top"> |
|||
<span style="width: 2rem" class='title'>{{ item.parkingInfoName }}</span> |
|||
</el-tooltip> |
|||
<span style="width: 2.1rem">{{ item.totalAmount }}元</span> |
|||
<span style="width: .8rem" @click="toGo(item, index, true)">详情</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<el-col :span="23" class="twoPagePag"> |
|||
<pagination v-show="total > 0 && activeNames.length>0" :total="total" :page.sync="queryParams.pageNum" |
|||
:limit.sync="queryParams.pageSize" @pagination="getList" /> |
|||
</el-col> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import vueSeamlessScroll from 'vue-seamless-scroll' |
|||
import { BiApi, recursionAreasTree } from "@/api/form"; |
|||
export default { |
|||
name: "seamlessRank", |
|||
props: { |
|||
listData2: { |
|||
type: Array, |
|||
default() { |
|||
return [] |
|||
} |
|||
}, |
|||
authCode: { |
|||
type: String, |
|||
default() { |
|||
return '' |
|||
} |
|||
}, |
|||
total: { |
|||
default() { |
|||
return 0 |
|||
} |
|||
} |
|||
}, |
|||
components: { |
|||
vueSeamlessScroll |
|||
}, |
|||
watch: { |
|||
'listData2': { |
|||
deep: true, |
|||
handler: function (newV, oldV) { |
|||
console.log('watch中：', newV, oldV) |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
activeNames: [], |
|||
i: 2, |
|||
show: true, |
|||
// 省份 |
|||
provinceOption: [], |
|||
// 城市 |
|||
cityOption: [], |
|||
// 区 |
|||
countyOption: [], |
|||
// 查询参数 |
|||
queryParams: { |
|||
province: null, |
|||
city: null, |
|||
county: null, |
|||
authCode: null, |
|||
pageNum: 1, |
|||
pageSize: 5, |
|||
}, |
|||
optionSetting: { |
|||
step: 0.5, // 数值越大速度滚动越快 |
|||
limitMoveNum: this.listData2.length, // 开始无缝滚动的数据量 this.dataList.length |
|||
hoverStop: false, // 是否开启鼠标悬停stop |
|||
direction: 0, // 0向下 1向上 2向左 3向右 |
|||
autoPlay: true, |
|||
openWatch: true, // 开启数据实时监控刷新dom |
|||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 |
|||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 |
|||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms) |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
mounted() { |
|||
this.areaDropDown() |
|||
}, |
|||
created() { |
|||
}, |
|||
methods: { |
|||
toGo(item, index, type) { |
|||
if (type) { |
|||
this.activeNames = []; |
|||
this.$emit("passfunction", item.pkParkingInfoId) |
|||
} else { |
|||
// 查询参数 |
|||
this.activeNames = []; |
|||
this.reset() |
|||
this.$emit("passfunction", '') |
|||
} |
|||
}, |
|||
handleChange(val) { |
|||
this.activeNames = val; |
|||
}, |
|||
reset() { |
|||
this.queryParams = { |
|||
province: null, |
|||
city: null, |
|||
county: null, |
|||
authCode: null, |
|||
pageNum: 1, |
|||
pageSize: 5, |
|||
} |
|||
}, |
|||
// 开放统计-车场排行 |
|||
getList() { |
|||
this.queryParams.authCode = this.authCode |
|||
BiApi.getParkingRanking(this.queryParams).then((res) => { |
|||
if (res && res.code === 200) this.$emit('changeMsg', res.rows, Number(res.total), true) |
|||
}) |
|||
}, |
|||
/** 重置按钮操作 */ |
|||
resetQuery() { |
|||
this.cityOption = []; |
|||
this.countyOption = []; |
|||
// 查询参数 |
|||
this.reset() |
|||
this.queryParams.authCode = this.authCode |
|||
BiApi.getParkingRanking(this.queryParams).then((res) => { |
|||
if (res && res.code === 200) this.$emit('changeMsg', res.rows, Number(res.total), false) |
|||
}) |
|||
}, |
|||
/** 搜索按钮操作 */ |
|||
handleQuery() { |
|||
this.activeNames = []; |
|||
this.getList(); |
|||
}, |
|||
|
|||
// 设置级联选择框的动态选择信息 |
|||
setProp() { |
|||
this.prop = { |
|||
lazy: true, |
|||
lazyLoad: (node, resolve) => { |
|||
let level = 2; |
|||
setTimeout(() => { |
|||
if (node.level == 0) { |
|||
recursionAreasTree |
|||
.areaDropDown() |
|||
.then((res) => { |
|||
// map方法根据你要的属性重组数组 |
|||
const cities = res.map((value) => ({ |
|||
treeId: value.value, |
|||
value: value.label, |
|||
label: value.label, |
|||
leaf: node.level >= level, |
|||
})); |
|||
|
|||
// 通过调用resolve将子节点数据返回，通知组件数据加载完成 |
|||
resolve(cities); |
|||
}) |
|||
.catch((err) => { |
|||
console.log(err); |
|||
}); |
|||
} |
|||
if (node.level != 0) { |
|||
let obj = { |
|||
parentId: node.data.treeId, |
|||
}; |
|||
recursionAreasTree |
|||
.areaDropDown(obj) |
|||
.then((res) => { |
|||
const areas = res.map((value) => ({ |
|||
treeId: value.value, |
|||
value: value.label, |
|||
label: value.label, |
|||
leaf: node.level >= level, |
|||
})); |
|||
// console.log(areas); |
|||
if (node.level == 2) { |
|||
this.areasList = [...areas]; |
|||
console.log(this.areasList); |
|||
} |
|||
// 通过调用resolve将子节点数据返回，通知组件数据加载完成 |
|||
resolve(areas); |
|||
}) |
|||
.catch((err) => { |
|||
console.log(err); |
|||
}); |
|||
} |
|||
}, 100); |
|||
}, |
|||
}; |
|||
}, |
|||
|
|||
// 获取单独省、市、县(区)下拉框 |
|||
areaDropDown(e) { |
|||
if (this.queryParams.province) { |
|||
if (this.queryParams.city) { |
|||
e = this.cityOption.filter(item => item.label === e)[0].value |
|||
} else { |
|||
e = this.provinceOption.filter(item => item.label === e)[0].value |
|||
} |
|||
} |
|||
if (!this.queryParams.province) { |
|||
this.queryParams.city = null; |
|||
this.queryParams.county = null; |
|||
this.cityOption = []; |
|||
this.countyOption = []; |
|||
} else if (!this.queryParams.city) { |
|||
this.queryParams.county = null; |
|||
this.countyOption = []; |
|||
} |
|||
let query = { |
|||
parentId: e, |
|||
}; |
|||
recursionAreasTree.areaDropDown(query).then((response) => { |
|||
if (!e) { |
|||
this.provinceOption = response; |
|||
} else if (e % 10000 == 0) { |
|||
this.queryParams.city = null; |
|||
this.queryParams.county = null; |
|||
this.cityOption = response; |
|||
} else { |
|||
this.queryParams.county = null; |
|||
this.countyOption = response; |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
beforeDestroy() { |
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
::-webkit-scrollbar-corner{ |
|||
display: none !important; |
|||
} |
|||
|
|||
.sn_scroll { |
|||
// overflow: scroll !important; |
|||
} |
|||
|
|||
.twoPagePag { |
|||
position: static !important; |
|||
} |
|||
|
|||
.pagination-container { |
|||
background: none !important; |
|||
padding: 0 0 !important; |
|||
} |
|||
|
|||
::v-deep .el-pagination__total { |
|||
color: #fff !important; |
|||
} |
|||
|
|||
::v-deep .el-pagination__jump { |
|||
color: #fff !important; |
|||
} |
|||
|
|||
.sn_show { |
|||
position: relative !important; |
|||
z-index: 999 !important; |
|||
overflow: visible !important; |
|||
} |
|||
|
|||
.sn_show .sn .sn-body { |
|||
color: #6FA8FF; |
|||
background-color: rgba(13, 36, 100, 0.2); |
|||
position: relative; |
|||
z-index: 999; |
|||
} |
|||
|
|||
.title { |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.search { |
|||
display: flex; |
|||
justify-content: left; |
|||
margin-left: .5rem; |
|||
} |
|||
|
|||
::v-deep .el-input__inner { |
|||
background: none; |
|||
border-color: #5A7FFF; |
|||
color: #fff !important; |
|||
} |
|||
|
|||
::v-deep .el-form--inline .el-form-item__label { |
|||
color: #fff; |
|||
} |
|||
|
|||
::v-deep .el-collapse-item__wrap { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
::v-deep .el-collapse-item__content { |
|||
background-color: #071643; |
|||
} |
|||
|
|||
::v-deep .el-form--inline .el-form-item__content { |
|||
width: 1.4rem; |
|||
} |
|||
|
|||
::v-deep .el-form-item { |
|||
margin-bottom: 0; |
|||
margin-right: 0 !important; |
|||
width: 2rem; |
|||
} |
|||
|
|||
::v-deep .el-form--inline .el-form-item__label { |
|||
font-size: 0.18rem !important; |
|||
text-align: center !important; |
|||
padding-right: 0; |
|||
} |
|||
|
|||
::v-deep .el-collapse { |
|||
border: none; |
|||
} |
|||
|
|||
::v-deep .el-collapse-item__header { |
|||
box-sizing: border-box; |
|||
padding-left: 0.5rem; |
|||
height: 0.7rem; |
|||
line-height: 0.7rem; |
|||
font-size: 0.25rem; |
|||
color: #fff; |
|||
background: url(../../assets/img/brand/parkIngo.png) no-repeat; |
|||
background-size: 9.8rem 0.7rem; |
|||
border: none; |
|||
} |
|||
|
|||
::v-deep .el-input--small .el-input__inner { |
|||
height: 0.4rem; |
|||
line-height: 0.4rem; |
|||
} |
|||
|
|||
.line { |
|||
display: flex; |
|||
align-items: center; |
|||
height: .41rem; |
|||
line-height: .41rem; |
|||
} |
|||
|
|||
.td { |
|||
color: #fff; |
|||
text-align: center; |
|||
border: none; |
|||
font-size: 0.14rem; |
|||
|
|||
img { |
|||
width: 0.4rem; |
|||
display: block; |
|||
margin: 0 auto; |
|||
height: 0.4rem; |
|||
// margin-top: .1rem; |
|||
} |
|||
} |
|||
|
|||
.topBg { |
|||
height: 0.7rem; |
|||
background: url(/img/img1.png) no-repeat; |
|||
background-size: contain; |
|||
display: flex; |
|||
align-items: center; |
|||
padding-left: 0.5rem; |
|||
color: #aeceff; |
|||
font-size: 0.21rem; |
|||
} |
|||
|
|||
.left-top { |
|||
height: 3.5rem; |
|||
position: relative; |
|||
background: url(/img/img2.png) no-repeat; |
|||
background-size: cover; |
|||
margin-bottom: 0.5rem; |
|||
} |
|||
|
|||
.tbody .tr:nth-child(odd) { |
|||
background: #06184b; |
|||
} |
|||
|
|||
//奇数行 |
|||
|
|||
.table { |
|||
width: 100%; |
|||
border-spacing: 0; |
|||
border-color: transparent; |
|||
|
|||
.thead { |
|||
background: #061131; |
|||
width: 100%; |
|||
height: 0.575rem; |
|||
line-height: 0.575rem; |
|||
font-size: 0.2rem; |
|||
|
|||
.td { |
|||
color: #6fa8ff; |
|||
text-align: center; |
|||
border: none; |
|||
font-size: 0.2rem; |
|||
} |
|||
} |
|||
|
|||
.tbody { |
|||
width: 100%; |
|||
|
|||
.td { |
|||
color: #fff; |
|||
text-align: center; |
|||
border: none; |
|||
font-size: 0.14rem; |
|||
|
|||
img { |
|||
width: 0.4rem; |
|||
display: block; |
|||
margin: 0 auto; |
|||
height: 0.4rem; |
|||
} |
|||
} |
|||
|
|||
.tr { |
|||
width: 100%; |
|||
height: 0.5rem; |
|||
line-height: 0.5rem; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.sn { |
|||
// position: absolute; |
|||
overflow: hidden; |
|||
display: block; |
|||
width: 6.3rem; |
|||
// height: 3.5rem; |
|||
margin-bottom: 0.5rem; |
|||
|
|||
.sn-title { |
|||
box-sizing: border-box; |
|||
padding-left: 0.5rem; |
|||
height: 0.7rem; |
|||
line-height: 0.7rem; |
|||
font-size: 0.25rem; |
|||
color: #fff; |
|||
background: url(../../assets/img/brand/parkIngo.png) no-repeat; |
|||
background-size: 9.8rem 0.7rem; |
|||
} |
|||
|
|||
.sn-body { |
|||
color: #6FA8FF; |
|||
background-color: rgba($color: #0d2464, $alpha: 0.2); |
|||
|
|||
.table-header { |
|||
height: 0.6rem; |
|||
line-height: 0.6rem; |
|||
|
|||
span { |
|||
font-size: 0.2rem; |
|||
text-align: center; |
|||
display: inline-block; |
|||
} |
|||
} |
|||
|
|||
.seamless-warp { |
|||
color: #fff; |
|||
height: 2.25rem; |
|||
overflow: hidden; |
|||
visibility: visible; |
|||
|
|||
.line { |
|||
&:nth-child(2n) { |
|||
|
|||
background: rgba(14, 75, 255, 0.1); |
|||
} |
|||
|
|||
span { |
|||
height: 0.45rem; |
|||
line-height: 0.45rem; |
|||
font-size: 0.175rem; |
|||
text-align: center; |
|||
display: inline-block; |
|||
} |
|||
} |
|||
|
|||
.in { |
|||
color: #1BDB7F; |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,58 @@ |
|||
Math.easeInOutQuad = function(t, b, c, d) { |
|||
t /= d / 2 |
|||
if (t < 1) { |
|||
return c / 2 * t * t + b |
|||
} |
|||
t-- |
|||
return -c / 2 * (t * (t - 2) - 1) + b |
|||
} |
|||
|
|||
// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
|
|||
var requestAnimFrame = (function() { |
|||
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) } |
|||
})() |
|||
|
|||
/** |
|||
* Because it's so fucking difficult to detect the scrolling element, just move them all |
|||
* @param {number} amount |
|||
*/ |
|||
function move(amount) { |
|||
document.documentElement.scrollTop = amount |
|||
document.body.parentNode.scrollTop = amount |
|||
document.body.scrollTop = amount |
|||
} |
|||
|
|||
function position() { |
|||
return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop |
|||
} |
|||
|
|||
/** |
|||
* @param {number} to |
|||
* @param {number} duration |
|||
* @param {Function} callback |
|||
*/ |
|||
export function scrollTo(to, duration, callback) { |
|||
const start = position() |
|||
const change = to - start |
|||
const increment = 20 |
|||
let currentTime = 0 |
|||
duration = (typeof (duration) === 'undefined') ? 500 : duration |
|||
var animateScroll = function() { |
|||
// increment the time
|
|||
currentTime += increment |
|||
// find the value with the quadratic in-out easing function
|
|||
var val = Math.easeInOutQuad(currentTime, start, change, duration) |
|||
// move the document.body
|
|||
move(val) |
|||
// do the animation unless its over
|
|||
if (currentTime < duration) { |
|||
requestAnimFrame(animateScroll) |
|||
} else { |
|||
if (callback && typeof (callback) === 'function') { |
|||
// the animation is done so lets callback
|
|||
callback() |
|||
} |
|||
} |
|||
} |
|||
animateScroll() |
|||
} |
|||
Loading…
Reference in new issue