收藏
回答

想要实现一个丝滑的页面自动滚动的效果,有什么好的实现思路?

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

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


实现效果(页面动画卡顿,文字和图片都一跳一跳的,很不丝滑):







回答关注问题邀请回答
收藏

2 个回答

  • Hik-y-0819
    Hik-y-0819
    2022-04-02

    scroll-with-animation 把这个属性打开试试

    2022-04-02
    有用 1
    回复 4
    • Mr_ZC
      Mr_ZC
      2022-04-02
      谢谢,加上后的确丝滑了,但同时多了两个bug,一是在自动滑动的过程中scroll事件触发不了了。二是无法用手指无法滑动了。。。
      2022-04-02
      回复
    • Hik-y-0819
      Hik-y-0819
      2022-04-02回复Mr_ZC
      这两个bug出现的原因应该都是setInterval的间隔时间太短了
      2022-04-02
      回复
    • Hik-y-0819
      Hik-y-0819
      2022-04-02回复Mr_ZC
      直接放弃scroll-view  使用页面页面滚动uni.pageScrollTo() 这个可以设置滚动动画  应该比scroll-view好实现一些
      2022-04-02
      回复
    • Mr_ZC
      Mr_ZC
      2022-04-02回复Hik-y-0819
      好的,我试试看
      2022-04-02
      回复
  • 一笑皆春
    一笑皆春
    2022-04-02

    多吃德芙就好了

    2022-04-02
    有用 2
    回复
登录 后发表内容