使用better-scroll完成自动滚动
Sonder
2023-03-23
1176字
3分钟
浏览 (1.3k)
效果图
![222311.gif](https://s2.loli.net/2023/03/23/jbSrUO69ecmQJfC.gif)
<template>
<div class='www'>
<BetterScroll ref='ItemScroll'>
<div v-for='item in 100'>{{item}}</div>
</BetterScroll>
</div>
</template>
<script>
import BetterScroll from '@/components/BetterScroll'
export default {
components: {
BetterScroll
},
async mounted() {
await this.initScroll()
this.runScroll();
},
methods: {
initScroll(){
return new Promise(resolve => {
this.$refs.ItemScroll && this.$refs.ItemScroll.initScroll()
resolve()
})
},
runScroll() {
let maxScrollHeight = this.$refs.ItemScroll.getScrollAttr("maxScrollY");
let time = Math.ceil(Math.abs(maxScrollHeight) / 60) * 5;
setTimeout(() => {
this.$refs.ItemScroll &&
this.$refs.ItemScroll.scrollTo(maxScrollHeight, time * 1000);
}, 1000);
},
}
}
</script>
<style lang="scss" scoped>
.www {
height: 100px;
text-align: center;
user-select: none;
background: #1f2d3d;
color: #fff;
overflow: hidden;
}
</style>