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

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

移动

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

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

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

我来解答赞 9 收藏

反馈

2 条解答

欧阳玉淇 Lv1

在百度小程序中监听页面滚动事件，确实可以通过 scroll-view 组件的 bindscroll 事件来实现，但有时候会出现你说的那种不稳定的情况。这通常是由于滚动速度过快导致的事件触发不及时。我们可以采取一些措施来优化这个问题。

首先，确保你的 scroll-view 组件配置正确，并且事件绑定无误。你的页面结构看起来是正确的，但我们需要检查一下 JavaScript 部分的处理函数是否正确实现了。

接下来，我们可以在 onScroll 事件处理函数中添加一些逻辑来提高滚动事件的响应性和稳定性。一个常见的做法是使用节流（throttle）或防抖（debounce）技术来减少事件触发的频率，从而提高性能。

下面是一个使用节流技术的示例：

// 定义一个节流函数

function throttle(func, wait) {

  let timeout = null;

  return function(...args) {

    const context = this;

    if (!timeout) {

      timeout = setTimeout(() => {

        func.apply(context, args);

        timeout = null;

      }, wait);

    }

  };

}



Page({

  data: {

    // 页面数据

  },



  // 使用节流包装后的 onScroll 事件处理函数

  onScroll: throttle(function(event) {

    // 在这里处理滚动事件

    console.log('Scrolling:', event.detail.scrollTop);

    // 注意：这里的 event.detail.scrollTop 是当前滚动的位置，你可以根据需要进行其他操作

  }, 200), // 200 毫秒的间隔时间可以根据实际情况调整



  onLoad: function() {

    // 页面加载时的初始化操作

  }

});

在这个例子中，我们定义了一个简单的节流函数 throttle，它会在指定的时间间隔内最多只执行一次回调函数。这样可以避免在短时间内频繁地触发滚动事件处理函数，从而提高性能。

需要注意的是，节流的时间间隔（这里是 200 毫秒）可以根据你的具体需求和用户体验来调整。如果需要更高的响应速度，可以适当减小这个值；反之，则可以适当增大。

另外，确保你的 scroll-view 中的内容足够多，以便能够产生滚动效果。如果内容不足以滚动，bindscroll 事件将不会被触发。

通过这种方式，你应该能够更好地监听页面的滚动事件，并且提高事件处理的稳定性。希望这些信息对你有帮助。

2026-03-20 17:28

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