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

艳鑫🍀 提问于 2026-03-15 20:21:20 阅读 46

移动

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

试过 window.addEventListener('scroll', handler)，也试过在页面根元素上加 ref 然后监听它的 scroll，都不行。是不是 Kbone 的 WebView 容器有什么特殊处理？

我的页面结构大概是这样的：

<template>
  <div id="page-root" style="height: 100vh; overflow-y: auto;">
    <div v-for="item in list" :key="item.id">{{ item.name }}</div>
  </div>
</template>

Kbone 移动端框架

我来解答赞 9 收藏

反馈

1 条解答

南宫振巧 Lv1

Kbone 环境下不能直接用原生 addEventListener 监听 scroll，得用小程序那套东西。

如果是监听整个页面的滚动，用 wx.onPageScroll：

export default {

  data() {

    return {

      scrollTop: 0

    }

  },

  mounted() {

    // 监听页面滚动

    wx.onPageScroll((res) => {

      this.scrollTop = res.scrollTop

      // 在这里判断是否触发懒加载

      if (res.scrollTop > this.threshold) {

        this.loadMore()

      }

    })

  },

  beforeDestroy() {

    // 一定要解绑，否则会内存泄漏

    wx.offPageScroll()

  },

  methods: {

    loadMore() {

      // 懒加载逻辑

    }

  }

}

如果你那个 div 是页面根元素并且你想监听它的滚动，其实在小程序里就是页面滚动，用上面那个方法就行。

如果是非页面根元素（比如页面里某个独立的滚动区域），Kbone 支持在元素上直接绑 @scroll 事件：

export default {

  methods: {

    handleScroll(e) {

      // e.target.scrollTop 就是滚动位置

      console.log(e.target.scrollTop)

    }

  }

}

两种方式你试一下，第一种监听页面滚动应该是你最需要的场景。

2026-03-16 18:12