元素
元素
工具
博客
问答

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

西门甜雅 阅读 72
移动

我在用 WePY 开发一个页面，想监听页面的滚动位置来做懒加载，但直接在 methods 里写 onScroll 好像没反应。查了文档说要用 wepy.page 的生命周期，但试了 onPageScroll 还是不触发，是不是写法有问题？

这是我的代码结构：

export default class Index extends wepy.page {
  config = {
    navigationBarTitleText: '首页'
  }

  onPageScroll(e) {
    console.log('滚动了', e.scrollTop)
  }
}
移动端框架
我来解答 赞 10 收藏
二维码
手机扫码查看
反馈
2 条解答
洺华~
洺华~ Lv1
在 WePY 中监听页面滚动事件确实有点坑，直接在 methods 里写 onScroll 确实不行，需要使用 WePY 提供的生命周期方法 onPageScroll。不过光定义方法还不够，还需要确保你的页面配置中启用了滚动监听。

你已经在 wepy.page 中定义了 onPageScroll 方法，这一步是对的。但可能遗漏了在页面的 JSON 配置文件中启用滚动监听。你需要在对应的页面的 .json 文件中添加 "enablePullDownRefresh": true 或者 "disableScroll": false，虽然后者默认就是 false，但有时候显式声明一下会更有保障。

不过，通常情况下，只需要确保 onPageScroll 正确定义就行。你可以检查一下你的项目结构，确认 onPageScroll 是否在正确的类中定义，并且这个类被正确引入和使用。

如果问题依然存在，可以尝试在 onLoad 或 onShow 生命周期中手动绑定滚动事件，但这通常不是必需的，因为 onPageScroll 应该已经足够。

这里有个简单的示例，确保你的代码结构类似：

export default class Index extends wepy.page {

  config = {

    navigationBarTitleText: '首页',

    enablePullDownRefresh: true // 确保有这个配置

  }



  data = {

    // 你的数据

  }



  onLoad() {

    // 初始化逻辑

  }



  onPageScroll(e) {

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

    // 懒加载逻辑可以放在这里

  }

}


确保你的 .json 文件中也有相应的配置：

{

  "usingComponents": {},

  "enablePullDownRefresh": true

}


这样应该就能捕获到滚动事件了。如果还是有问题，可能是 WePY 版本或者项目配置上的其他地方出了问题，可以试试更新 WePY 或者检查项目配置。
点赞
2026-03-21 16:01
天佑🍀
天佑🍀 Lv1
WePY 1.x 里页面滚动事件不是这么写的，得用 this.$wxPage.on('scroll', callback) 来监听：

import wepy from 'wepy';



export default class Index extends wepy.page {

  config = {

    navigationBarTitleText: '首页'

  }



  onLoad() {

    this.$wxPage.on('scroll', (e) => {

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

    });

  }

}


或者用全局的 wepy.onPageScroll 也可以。直接这么写就行，onPageScroll 是原生小程序的写法，WePY 不支持。
点赞
2026-03-17 19:20
相关推荐
  • 1

    回答

    74

    浏览

    WePY 中如何监听页面返回事件？

    我在用 WePY 开发小程序，现在有个页面需要在用户点击左上角返回按钮时做些清理操作，但不知道怎么监听页面返回。 试过 onUnload，但它在页面关闭时才触发，而我想在用户真正点击返回的时候就处理。...

    打工人张豪
    移动 2026-03-23 12:30:23
  • 1

    回答

    38

    浏览

    WePY中如何正确绑定input的值变化事件？

    我在用WePY写小程序时，想监听input输入框的内容变化，但发现onInput事件里拿不到最新的值，试了setData也不行，到底该怎么写才对？ 我现在的代码是这样的： methods: { onI...

    予曦~
    移动 2026-02-27 15:42:18
  • 2

    回答

    72

    浏览

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

    我在用mpvue开发微信小程序时，想监听页面的滚动事件来做懒加载，但发现直接在页面里写onScroll根本没反应。查了文档说要用scroll-view组件包裹内容并绑定@scroll事件，可这样又导致...

    轩辕鹏宇
    移动 2026-03-17 23:26:23
  • 2

    回答

    46

    浏览

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

    我在Taro开发微信小程序时，想监听页面的滚动事件，用了Taro.createSelectorQuery()和onPageScroll都不太对，页面根本没触发。 查了文档说要在页面配置里加"enabl...

    子晨~
    移动 2026-03-12 13:15:19
  • 2

    回答

    51

    浏览

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

    我在用 Kbone 开发一个混合应用，想监听页面的滚动位置来做懒加载。但在小程序端绑定 scroll 事件完全没反应，H5 端倒是正常的。我试过在 mounted 里加 window.addEvent...

    书生シ艳鑫
    移动 2026-03-09 16:58:22
  • 2

    回答

    84

    浏览

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

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

    一利娟
    框架 2026-03-07 14:26:20
  • 2

    回答

    60

    浏览

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

    我在用 Kbone 开发微信小程序，想监听页面的滚动位置，但 onScroll 事件好像不生效。 试过在页面根元素加 bindscroll，也试过用 window.addEventListener('...

    ❤俊贺
    框架 2026-02-28 17:55:20
  • 2

    回答

    100

    浏览

    字节小程序中如何正确监听页面滚动事件？

    我在字节小程序里想监听页面的滚动，用了 tt.onPageScroll 但好像没触发，页面结构是普通 scroll-view 包裹内容。是不是必须用页面级滚动才行？试过在 Page 配置里加 enab...

    ❤露露
    移动 2026-03-23 06:24:22
  • 1

    回答

    57

    浏览

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

    我在用 Kbone 开发一个混合应用，想监听页面的滚动位置来做懒加载，但发现直接在 window 上监听 scroll 事件完全没反应。 试过 window.addEventListener('scr...

    艳鑫🍀
    移动 2026-03-15 20:21:20
  • 2

    回答

    37

    浏览

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

    我在Taro开发微信小程序时，想监听页面的滚动位置，但用onPageScroll好像没生效，控制台也没报错。 页面结构是普通ScrollView包裹内容，是不是得用别的方法？试过在componentD...

    子源~
    移动 2026-03-01 09:55:19
元素
元素
工具
博客
问答
登录/注册