百度小程序中如何监听页面滚动事件？

Designer°风珍提问于 2026-03-05 18:08:20 阅读 67

移动

我在百度小程序里想监听页面的滚动，试了 onScroll 但根本没触发，文档里也没找到明确说明。是不是得用别的方法？

我页面结构是用 scroll-view 包裹内容，加了 bindscroll 事件，但有时候滑动很快就不触发，感觉不太稳定。

<scroll-view scroll-y="true" bindscroll="onScroll">
  <view>很多内容...</view>
</scroll-view>

我来解答赞 2 收藏

反馈

1 条解答

IT人玉萱 Lv1

百度小程序的滚动监听确实有点坑，我碰到过同样的问题。scroll-view的bindscroll在快速滑动时确实容易丢事件，这是小程序本身的性能限制。

给你两个实测可用的方案：

1. 换用page本身的onPageScroll事件（前提是不用scroll-view）：

Page({

  onPageScroll(e) {

    console.log('滚动位置', e.scrollTop)

  }

})

2. 如果必须用scroll-view，加个防抖：

let timer = null

Page({

  onScroll(e) {

    clearTimeout(timer)

    timer = setTimeout(() => {

      console.log('稳定后的位置', e.detail.scrollTop)

    }, 200)

  }

})

第二个方案虽然不完美但能凑合用，200ms的延迟在大部分场景下还算能接受。另外检查下scroll-view的高度是不是设成了100vh，这个也经常导致滚动事件出问题。

2026-03-05 18:13