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

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

移动

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

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

Kbone 移动端框架

我来解答赞 11 收藏

反馈

2 条解答

莉娜（打工版） Lv1

在 Kbone 里处理滚动事件确实有点讲究，小程序环境和 H5 环境的差异导致直接用 window.addEventListener 不太靠谱。推荐的做法是使用 Kbone 提供的适配层来处理。

具体来说，在需要监听滚动的地方，你可以这样写：

import { onPageScroll } from 'miniprogram-api'



export default {

  created() {

    this.handleScroll = this.handleScroll.bind(this)

  },

  mounted() {

    onPageScroll(this.handleScroll)

  },

  methods: {

    handleScroll({ scrollTop }) {

      console.log('当前滚动位置：', scrollTop)

      // 在这里处理你的懒加载逻辑

    }

  }

}

注意几个细节：
- 这里用了 onPageScroll 这个 API，它是 Kbone 针对小程序端提供的页面滚动事件
- 参数会返回一个对象，包含 scrollTop 属性，这个值就是你想要的滚动位置

这个方法在小程序和 H5 上都能正常工作，Kbone 会在底层做适配。虽然多了一层封装，但比起自己去判断平台再分别处理要省心不少。说实话，这种跨端问题最烦人了，好在 Kbone 帮我们解决了大部分麻烦。

2026-03-31 10:28

薪羽~ 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