uniapp监听页面滚动2种常用方法

前言

在uni-app开发中，实现页面滚动监听主要依赖onPageScroll生命周期函数或@scroll事件监听器，具体选择需结合实际业务场景与监听目标。下文将分别阐述这两种实现路径。

1. 使用onPageScroll生命周期函数

onPageScroll是uni-app页面特有的生命周期钩子，当页面发生滚动时自动触发。该函数接收一个参数对象，其中包含scrollTop（垂直滚动距离）和scrollLeft（水平滚动距离）等关键属性。

export default {
onPageScroll: function(e) {
console.log('滚动距离：', e.scrollTop); // 垂直滚动距离
// 这里可以根据e对象中的值来执行相应的操作
},
// 其他页面生命周期函数或数据、方法等
}

需注意，onPageScroll专用于监听整个页面的滚动行为，无法直接用于监听单个组件或特定DOM元素的滚动状态。

2. 使用@scroll事件监听器

若需监听特定组件（如scroll-view）的滚动行为，应选用@scroll事件监听器。scroll-view是uni-app提供的可滚动视图组件，功能类似于HTML中的div元素，但内置了滚动交互能力。

首先，在页面的.vue文件中引入scroll-view组件，并通过@scroll属性绑定处理函数以捕获滚动事件。

<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事件监听器。

到此这篇关于uniapp监听页面滚动2种常用方法的文章就介绍到这了,更多相关uniapp监听页面滚动内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！