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

子晨~ 提问于 2026-03-12 13:15:19 阅读 4

移动

我在Taro开发微信小程序时，想监听页面的滚动事件，用了Taro.createSelectorQuery()和onPageScroll都不太对，页面根本没触发。

查了文档说要在页面配置里加"enablePageScroll": true，但加了也没用。我的页面结构是普通的ScrollView包裹内容，是不是不能同时用ScrollView和onPageScroll？

export default {
  onPageScroll(e) {
    console.log('scroll', e.scrollTop)
  }
}

Taro 跨端开发

我来解答赞 2 收藏

反馈

1 条解答

皇甫艳艳 Lv1

你的问题很常见，就是把页面滚动和ScrollView滚动搞混了。

如果你的页面用的是ScrollView组件，那onPageScroll根本不会触发，因为ScrollView内部滚动是组件级别的事件，不会冒泡到页面级别。你应该用ScrollView的onScroll属性来监听。

// 正确做法：用ScrollView的onScroll

import { ScrollView } from '@tarojs/components'



export default function Index() {

  const handleScroll = (e) => {

    console.log('scrollTop:', e.detail.scrollTop)

  }



  return (

    
      scrollY

      onScroll={handleScroll}

    >

      {/ 内容 /}

    

  )

}

如果你想用onPageScroll让整个页面滚动，那就不能用ScrollView包裹，要让页面本身滚动。需要在页面配置里开启：

// config/index.js 或 page.config.js

export default {

  navigationBarTitleText: '首页',

  enablePageScroll: true  // 开启页面滚动

}

然后页面不要用ScrollView，直接放内容就行：

// 页面组件里

export default class Index extends Component {

  onPageScroll(e) {

    console.log('scrollTop:', e.scrollTop)

  }



  render() {

    return (

      

        {/ 这里直接放内容，会随页面滚动 /}

      

    )

  }

}

总结一下：ScrollView滚动用onScroll，页面滚动用onPageScroll，两者只能选一个，不能同时用。你之前的情况就是页面被ScrollView撑开了，页面本身没有滚动，所以onPageScroll不会触发。

2026-03-12 14:12