想要实现一个丝滑的页面自动滚动的效果,有什么好的实现思路?
最终要实现的效果是页面自动滚动,用户触碰屏幕时要能立即停下来 尝试了实现的思路是通过scroll-view把需要滚动的内容放到里面,然后通过定时器修改scroll-top,但由于频繁setData性能非常差页面卡顿,不太流畅,请问有什么比较好的方式实现这个效果? 现有思路大致代码如下(uniapp): xml: <scroll-view scroll-y :scroll-top="viewScrollTop" @touchstart="handleTouchstart">
.....
</scroll-view
js: {
data: {
viewScrollTop: 0,
},
mounted(){
this.autoScrollTimer = setInterval(()=>{
this.viewScrollTop++
},30)
},
methods:{
//触碰屏幕停止滚动
handleTouchstart(){
clearInterval(this.autoScrollTimer)
}
}
}
实现效果(页面动画卡顿,文字和图片都一跳一跳的,很不丝滑): [图片]