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

轩辕鹏宇提问于 2026-03-17 23:26:23 阅读 72

移动

我在用mpvue开发微信小程序时，想监听页面的滚动事件来做懒加载，但发现直接在页面里写onScroll根本没反应。查了文档说要用scroll-view组件包裹内容并绑定@scroll事件，可这样又导致整个页面结构要大改，而且下拉刷新也不好处理。

有没有办法在不改动现有布局的前提下，直接监听页面级的滚动？我试过在mounted里加uni.onWindowScroll，但控制台报错说找不到这个API。现在卡在这儿了，求指点！

export default {
  mounted() {
    // 这样写会报错：TypeError: uni.onWindowScroll is not a function
    uni.onWindowScroll((res) => {
      console.log('scroll', res.scrollTop)
    })
  }
}

mpvue

我来解答赞 6 收藏

反馈

2 条解答

A. 秀丽 Lv1

问题应该出在你用了错误的API。mpvue里确实可以直接监听页面滚动，不过要用onPageScroll这个生命周期函数，而不是uni的什么方法。

在你的page配置里加上这个函数就能搞定：

export default {

  onPageScroll(e) {

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

  }

}

记得要把这个写在export对象的顶层，跟data、methods这些同级。这样就不用改布局，也不用加什么scroll-view组件了。

这里要注意个坑：如果页面有tab切换或者动态内容高度变化，最好给页面加个固定高度，不然滚动事件可能不准。

我之前也踩过这坑，浪费了不少时间调试。希望这次能帮你少走弯路。

2026-03-30 16:03

UP主～冬冬 Lv1

mpvue里监听页面滚动不能用组件生命周期，得用页面级生命周期onPageScroll，在页面根目录的js文件里直接写：

export default {

  onPageScroll(options) {

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

    // 在这里做你的懒加载逻辑

  }

}

这货是微信小程序原生提供的API，只能在页面js里用，组件里无效。你项目结构里那个main.json对应的页面js文件知道吧，就写那儿。

2026-03-18 03:02