最终要实现的效果是页面自动滚动,用户触碰屏幕时要能立即停下来
尝试了实现的思路是通过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)
}
}
}
实现效果(页面动画卡顿,文字和图片都一跳一跳的,很不丝滑):
scroll-with-animation 把这个属性打开试试
多吃德芙就好了