小程序滚动事件相关总结

最新推荐文章于 2025-07-08 11:27:21 发布

原创最新推荐文章于 2025-07-08 11:27:21 发布 · 8.1k 阅读

CC 4.0 BY-SA版权

文章标签：

17 篇文章

订阅专栏

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过度时间。