最终要实现的效果是页面自动滚动，用户触碰屏幕时要能立即停下来

尝试了实现的思路是通过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)
          }
      }
}

实现效果（页面动画卡顿，文字和图片都一跳一跳的，很不丝滑）：