uniapp vue3语法如何使用onpagescroll实现页面滚动监听

在uniapp中使用vue3语法时，如何正确使用onPageScroll监听页面滚动事件？我按照官方文档尝试在页面中配置了onPageScroll方法，但滚动时始终无法触发回调函数。是否需要额外引入某些API或在pages.json中进行特殊配置？求具体实现代码示例和常见问题排查方法。

2 回复

在uniapp的vue3中，使用onPageScroll监听页面滚动：

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

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

或者写在setup中：

export default {
  setup() {
    onPageScroll((e) => {
      console.log('滚动位置:', e.scrollTop)
    })
  }
}

注意：需要在pages.json中配置对应页面的"style": { "onReachBottomDistance": 50 }


在 UniApp 中使用 Vue 3 语法实现页面滚动监听，可以通过 onPageScroll 生命周期函数来实现。以下是具体步骤和示例代码：

实现方法：

  1. 在页面组件中使用 onPageScroll：
    在 Vue 3 的 setup 语法中，通过 onPageScroll 函数监听页面滚动事件。

  2. 获取滚动位置：
    onPageScroll 事件会返回一个对象，包含 scrollTop 属性，表示页面垂直滚动距离。

示例代码：

<template>
  <view>
    <!-- 页面内容 -->
    <view style="height: 2000px; background: #f0f0f0;">
      滚动到这里查看效果，当前滚动距离：{{ scrollTop }}px
    </view>
  </view>
</template>

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

// 定义响应式变量存储滚动位置
const scrollTop = ref(0)

// 监听页面滚动
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
  console.log('滚动距离：', e.scrollTop)
})
</script>

注意事项：

  • 仅页面支持：onPageScroll 仅在页面组件中生效，自定义组件内无法使用。
  • 节流优化：默认已做节流处理，无需手动优化性能。
  • 兼容性：适用于 Vue 3 的 Composition API 语法。

通过以上代码，即可在页面滚动时实时获取并更新滚动位置。

回到顶部