uniapp如何监听页面滚动？

在uni-app中，监听页面滚动通常使用

onPageScroll

生命周期函数或者

@scroll

事件监听器，具体使用哪个取决于你的场景和需要。以下将分别介绍这两种方式。

1. 使用

onPageScroll

生命周期函数

onPageScroll

是uni-app页面特有的生命周期函数，当页面滚动时触发。该函数接收一个对象作为参数，该对象包含滚动相关的信息，如

scrollTop

（垂直滚动距离）、

scrollLeft

（水平滚动距离）等。

javascript复制代码

export default { 

onPageScroll: function(e) { 

console.log('滚动距离：', e.scrollTop); // 垂直滚动距离 

// 这里可以根据e对象中的值来执行相应的操作 

}, 

// 其他页面生命周期函数或数据、方法等 

}

注意：

onPageScroll

主要用于监听整个页面的滚动事件，而不是某个单独组件或元素的滚动。

2. 使用

@scroll

事件监听器

如果你的需求是监听某个特定组件（如

scroll-view

）的滚动事件，那么应该使用

@scroll

事件监听器。

scroll-view

是uni-app提供的一个可滚动视图区域的组件，类似于HTML的

div

元素但增加了滚动功能。

首先，你需要在页面的

.vue

文件中使用

scroll-view

组件，并通过

@scroll

属性绑定一个处理函数来监听滚动事件。

html复制代码

<template> 

<view> 

<scroll-view class="scroll-view" scroll-y="true" @scroll="handleScroll"> 

<!-- 这里是你的滚动内容 --> 

<view v-for="(item, index) in 100" :key="index" class="scroll-item">{{ item }}</view> 

</scroll-view> 

</view> 

</template> 

<script> 

export default { 

methods: { 

handleScroll: function(e) { 

console.log('滚动事件触发', e.detail.scrollTop); // 获取滚动条距离顶部的距离 

// 这里可以执行你想要的逻辑 

} 

} 

} 

</script> 

<style> 

.scroll-view { 

height: 300px; /* 限定高度以产生滚动 */ 

width: 100%; 

} 

.scroll-item { 

height: 50px; /* 示例高度 */ 

line-height: 50px; 

text-align: center; 

border-bottom: 1px solid #ccc; 

} 

</style>

在这个例子中，

scroll-view

组件的

scroll-y="true"

属性表示允许垂直滚动，

@scroll="handleScroll"

绑定了滚动事件的处理函数

handleScroll

。在

handleScroll

函数中，你可以通过

e.detail.scrollTop

获取到滚动条距离顶部的距离，并据此执行相应的逻辑。

总结：如果你需要监听整个页面的滚动，使用

onPageScroll

；如果需要监听某个组件（如

scroll-view

）的滚动，使用

@scroll

事件监听器。