uniapp onpagescroll hooks 如何使用

在uniapp中，onPageScroll这个hooks具体该怎么使用？我在页面里添加了onPageScroll方法，但是滚动时没有触发回调。请问正确的用法是什么？需要在哪里注册这个钩子函数？还需要做其他配置吗？如果是自定义组件中使用，和页面中使用有什么区别？

2 回复

在uniapp中，使用onPageScroll监听页面滚动。在页面script中定义：

onPageScroll(e) {
  console.log(e.scrollTop) // 滚动距离
}

注意：仅支持页面级使用，组件内无效。适合做吸顶、隐藏导航等效果。


在 UniApp 中，onPageScroll 是一个页面生命周期钩子，用于监听页面滚动事件。它仅在页面级生效，适用于获取滚动位置并实现动态效果（如导航栏透明度变化）。以下是使用方法及示例：

基本用法

  1. 在页面脚本中定义：在页面的 .vue 文件中的 <script> 部分，将 onPageScroll 作为方法声明。
  2. 参数：它接收一个 Object 参数，包含 scrollTop 属性（页面滚动距离顶部像素值）。

代码示例

<script>
export default {
  data() {
    return {
      scrollTop: 0
    };
  },
  onPageScroll(e) {
    // e.scrollTop 获取滚动位置
    this.scrollTop = e.scrollTop;
    console.log("滚动位置:", e.scrollTop);
    
    // 示例：滚动超过100px时改变样式
    if (e.scrollTop > 100) {
      // 执行操作，如修改数据绑定样式
    }
  }
};
</script>

注意事项

  • 仅页面有效：不能在组件或 App.vue 中使用。
  • 节流优化：默认已节流，无需手动处理，但避免密集逻辑以防性能问题。
  • 用途：常用于滚动吸顶、隐藏导航栏等交互。

实际应用

例如，实现导航栏随滚动渐变：

onPageScroll(e) {
  let opacity = Math.min(e.scrollTop / 200, 1); // 计算透明度
  this.navBarOpacity = opacity; // 绑定到data中控制样式
}

在模板中使用：

<view :style="{ opacity: navBarOpacity }">导航栏</view>

如有更多需求，请参考 UniApp 官方文档！

回到顶部