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

书生シ艳鑫提问于 2026-03-09 16:58:22 阅读 12

移动

我在用 Kbone 开发一个混合应用，想监听页面的滚动位置来做懒加载。但在小程序端绑定 scroll 事件完全没反应，H5 端倒是正常的。我试过在 mounted 里加 window.addEventListener('scroll', handler)，但小程序里 window 对象好像不支持这个？

查了文档说要用 Kbone 的适配层，但没找到具体例子。是不是得用特殊的 API？有没有人遇到过类似问题？

Kbone 移动端框架

我来解答赞 5 收藏

反馈

1 条解答

薪羽~ Lv1

Kbone里小程序端的滚动监听确实和H5不一样，不能用window对象。要用pageScrollTo相关的API，我来告诉你怎么搞效率最高。

首先在模板里给滚动容器加个ref：

<scroll-view ref="scrollContainer" scroll-y>

  <!-- 你的内容 -->

</scroll-view>

然后在mounted里这么绑定：

mounted() {

  if (process.env.isMiniprogram) {

    // 小程序端

    this.$refs.scrollContainer.$el.addEventListener('scroll', this.handleScroll)

  } else {

    // H5端

    window.addEventListener('scroll', this.handleScroll)

  }

}

别忘了在beforeDestroy里解绑事件，不然会内存泄漏。对了，如果你要做懒加载，建议加个节流函数，别让scroll事件触发太频繁：

handleScroll: throttle(function() {

  // 这里写你的懒加载逻辑

}, 200)

小程序里scroll-view的性能比H5的window.scroll差一些，所以节流时间可以设长点。我之前项目设200ms就够用了，再短可能会卡顿。

2026-03-09 17:02