uniapp vue3 onpagescroll 的使用方法

在uniapp的vue3项目中，onPageScroll事件无法触发是怎么回事？我已经按照文档在页面中使用了onPageScroll生命周期，但是滚动页面时完全没有反应。请问正确的使用方法是什么？需要额外配置什么吗？还有这个事件在微信小程序和H5中是否都支持？求解答！

2 回复

在Vue3中，使用onPageScroll监听页面滚动：

import { onPageScroll } from '@dcloudio/uni-app'

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

注意：需在页面级组件中使用，且仅支持H5和小程序平台。


在 UniApp 中使用 Vue 3 时，onPageScroll 是一个页面生命周期钩子，用于监听页面滚动事件。以下是使用方法：

1. 在页面中定义 onPageScroll

在 Vue 3 的 setup 语法中，直接在页面组件的 <script setup> 中定义 onPageScroll 函数。

<script setup>
import { onPageScroll } from '@dcloudio/uni-app'

onPageScroll((e) => {
  console.log('页面滚动距离:', e.scrollTop) // e.scrollTop 是滚动条距顶部的距离（单位：px）
})
</script>

2. 结合响应式数据使用

可以结合 ref 或 reactive 实现动态效果，例如隐藏/显示导航栏。

<script setup>
import { ref, onPageScroll } from '@dcloudio/uni-app'

const showNav = ref(true)
let lastScrollTop = 0

onPageScroll((e) => {
  const currentScrollTop = e.scrollTop
  // 向下滚动隐藏导航，向上滚动显示
  if (currentScrollTop > lastScrollTop && currentScrollTop > 50) {
    showNav.value = false
  } else {
    showNav.value = true
  }
  lastScrollTop = currentScrollTop
})
</script>

<template>
  <view v-if="showNav">导航栏</view>
  <!-- 页面内容 -->
</template>

注意事项：

  • 仅页面有效：onPageScroll 只能在页面组件中使用，不能在自定义组件中使用。
  • 节流优化：默认已节流，无需手动处理，避免频繁触发影响性能。
  • 兼容性：适用于所有 UniApp 支持的平台（H5、小程序、App）。

示例场景：

  • 滚动时改变元素样式（如导航栏透明度）。
  • 实现“回到顶部”按钮的显示/隐藏。
  • 监听滚动位置加载更多数据（需结合页面高度计算）。

通过以上方法，即可在 UniApp Vue 3 项目中有效使用 onPageScroll 监听页面滚动。

回到顶部