html part
<template>
<view class="home">
<view class="rank bg-white p30 mt30">
<view class="mt20">
<scroll-view class="scroll-view" :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="scrolltolower"
:scroll-with-animation="isAni" @scroll="scroll" :lower-threshold="0">
<view class="p30 c-row c-row-middle" v-for="(item,index) in dynamic" :key="index">
<view class="">
<c-thumb src="/static/default/default-header.png" size="40"></c-thumb>
</view>
<view class="flex-cover c-row c-row-middle-center">
<text class="flex-cover c-row c-row-middle-center">{
{item.name}}</text>
<text class="flex-cover c-row c-row-middle-center">{
{item.rmark}}</text>
<text class="flex-cover c-row c-row-middle-center">{
{item.time}}</text>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'home',
data() {
return {
scrollTop: 0, //滚动距离
scrollTimer: null, //滚动定时器
scrollStartTime: 0, //滚动开始时间
scrollEndTimer: null, //滚动结束延迟定时器
isAni: true, //是否开启动画
dynamic: [{
name: '名字',
rmark: '升级奖励',
time: '2020-20-10'
},
{
name: '名字',
rmark: '升级奖励',
time: '2020-20-10'
},
{
name: '名字',
rmark: '升级奖励',
time: '2020-20-10'
},
{
name: '名字',
rmark: '升级奖励',
time: '2020-20-10'
},
{
name: '名字',
rmark: '升级奖励',
time: '2020-20-10'
},
{
name: '名字',
rmark: '升级奖励',
time: '2020-20-10'
},
{
name: '名字',
rmark: '升级奖励',
time: '2020-20-10'
},
{
name: '名字',
rmark: '升级奖励',
time: '2020-20-10'
},
{
name: '名字',
rmark: '升级奖励',
time: '2020-20-10'
},
{
name: '名字',
rmark: '升级奖励',
time: '2020-20-10'
},
{
name: '名字',
rmark: '升级奖励',
time: '2020-20-10'
},
{
name: '名字',
rmark: '升级奖励',
time: '2020-20-10'
}
]
}
},
methods: {
/* 监听是否滚到底部 */
scrolltolower(e) {
let timer = null;
clearTimeout(timer);
this.isAni = false;
this.scrollTop = 0;
timer = setTimeout(() => {
this.isAni = true;
}, 100);
},
/* 开始滚动 */
startScroll() {
clearInterval(this.scrollTimer);
this.scrollTimer = setInterval(() => {
this.scrollTop += 10;
}, 1000);
},
async scroll(e) {
if (!e) {
await this.scrolltolower();
await this.startScroll();
} else {
let timeStamp = e.timeStamp.toFixed(0);
if (this.scrollStartTime) {
//判断是自动滚动还是鼠标滚动 是否在定时器的时间范围内
if (timeStamp - this.scrollStartTime <= 900) {
clearInterval(this.scrollTimer);
clearTimeout(this.scrollEndTimer);
//记录当前的滚动距离
this.scrollTop = e.detail.scrollTop;
//重新挂载滚动定时器
this.scrollEndTimer = setTimeout(() => {
this.startScroll();
}, 1000);
}
}
this.scrollStartTime = timeStamp;
}
},
},
onLoad() {
this.startScroll();
}
}
</script>
<style lang="scss" scoped>
.home {
.bg-white {
background-color: #fff;
}
.scroll-view {
height: 348rpx;
background-color: #F3F6F9;
border-radius: 10rpx;
}
}
</style>