小程序滚动事件相关总结

1.有时候我们需要每次进入页面都是回到页面的顶部的这时候可以用 :

wx.pageScrollTo({
  scrollTop: 0,
  duration: 300
})
这其实跟其他技术路由跳转设置每次都从顶部开始是一个道理。这个方法目前与<scroll-view>组件在同个页面中使用时会有冲突不起作用。

2.上拉加载更多数据。

小程序中数据分页请求的情况也是比较多的,这个时候我可能需要进行上拉加载更多操作。我目前知道两种方法:

  1).运用<scroll-view>组件 监听其bindscrolltolower事件,注意点:scroll-y要设为true, 给需要滚动的区域设置height

  2).小程序页面都能使用 onReachBottom() 事件处理函数

 这两种方法都可以实现,看自己需求了。

3. 到页面最后最底部 想触发bindscrolltolower事件 或onReachBottom() 必须要先往下滑再往上拉才能触发问题

  被这个问题搞了有一段时间,网上,社区提问,问公司的大佬都没能解决, PM一致纠结这个,想打人的心情都有了。。。 今天下午灵光一现,想到一个方法可以解决:就是当页面滚动到底部的时候,往上回滚一些距离。

代码如下:

1)通过使用页面自带的onPageScroll事件处理函数获取距离顶部的距离 

onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  }

2)当页面滚动到底部时网上回滚一些距离

onReachBottom() {
  wx.pageScrollTo({
    scrollTop: this.scrollTop-2,
    duration: 0
  })
  //其他操作
}

想往上回滚多少距离就减多少,单位是px, duration需要设为0 , 要不然会有默认的300ms过度时间。

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
微信小程序中的scroll-view组件是用来实现滚动视图的,但默认情况下并不支持循环滚动。如果需要实现循环滚动,我们可以通过一些自定义的方式来实现。 实现循环滚动的基本思路是在scroll-view组件外面放置一个容器,并在容器中复制一份完整的内容,并且在容器的开始和结束处分别添加一份内容的副本。通过设置容器的宽度为原始内容的宽度加上一份内容的副本的宽度,来实现循环滚动的效果。 具体实现的步骤如下: 1. 在scroll-view组件外部添加一个容器,例如使用view组件包裹scroll-view组件。 2. 获取原始内容的宽度,可以使用小程序的API来获取元素的宽度,如wx.createSelectorQuery().select('#id').boundingClientRect() 3. 复制一份完整的内容,并在容器的开始和结束处分别添加一份内容的副本。 4. 设置容器的宽度为原始内容的宽度加上一份内容的副本的宽度。 5. 在scroll-view组件的bindscroll事件中,通过监听滚动的偏移量,当滚动偏移量超过容器的宽度时,将scroll-view的滚动到对应的位置,并且将滚动偏移量重置为0,实现循环滚动的效果。 需要注意的是,滚动的速度要快于内容的切换,否则会出现内容错乱的情况。同时,由于scroll-view组件在滚动到边缘时会有一定的滚动回弹效果,所以在滚动到容器的开始和结束处时会有一小段回弹效果,可以根据具体的需求进行调整和优化。 总结起来,通过在scroll-view组件外部添加一个容器,在容器中复制一份完整的内容并设置容器的宽度,以及通过监听滚动事件来实现滚动偏移量的调整,就可以实现微信小程序中scroll-view的循环滚动效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值