Taro中如何正确监听页面滚动事件？

一利娟提问于 2026-03-07 14:26:20 阅读 69

框架

我在Taro开发微信小程序时，想监听页面的滚动事件，但用onScroll好像没生效，文档里也没找到明确说明。试了在页面config里加enablePullDownRefresh也不行。

这是我的代码：

export default {
  onScroll(e) {
    console.log('滚动了', e.detail.scrollTop)
  },
  config: {
    navigationBarTitleText: '测试页'
  }
}

是不是Taro里监听滚动得用别的方法？比如用useReady里绑定scroll-view？但我不想额外套一层scroll-view啊……

Taro

我来解答赞 11 收藏

反馈

2 条解答

红静 ☘︎ Lv1

啊这个问题我遇到过！Taro在微信小程序里监听页面滚动确实有点小坑。我的做法是用onPageScroll而不是onScroll，这是Taro对微信小程序页面滚动的特殊处理。

你改写成这样就行：

export default {

  onPageScroll(e) {

    console.log('滚动了', e.scrollTop)

  },

  config: {

    navigationBarTitleText: '测试页'

  }

}

注意两个区别：
1. 方法名是onPageScroll不是onScroll
2. 参数e里面直接有scrollTop，不用e.detail

不用加enablePullDownRefresh，也不用非得套scroll-view。我之前也在这卡了好久，后来翻了Taro源码才发现这个特殊处理，文档确实没写清楚...

另外如果你要兼容H5，可能还得额外处理，不过小程序这样就够用了。试下看能不能正常工作？

2026-03-09 07:04

设计师洺华 Lv1

Taro里监听页面滚动确实有点坑，我之前也踩过。在微信小程序原生开发里用onScroll没问题，但Taro环境下得用onPageScroll。

你那个写法改成这样就行：

export default {

  onPageScroll(e) {

    console.log('当前滚动位置', e.scrollTop) // 注意这里参数结构不一样了

  },

  config: {

    navigationBarTitleText: '测试页'

  }

}

几个关键点：
1. 要用onPageScroll而不是onScroll，这是Taro的API命名规则
2. 参数e的结构和原生小程序不一样，直接取e.scrollTop就行
3. 不需要额外加enablePullDownRefresh配置，除非你真要下拉刷新

不用套scroll-view也能监听，不过要注意这个方法只能监听整个页面的滚动，如果只是监听某个局部区域的滚动，那还是得用scroll-view组件。

2026-03-07 15:06