快捷導(dǎo)航

uniapp監(jiān)聽頁面滾動(dòng)2種常用方法

更新時(shí)間：2024年09月18日 09:17:23 作者：恰小面包

在uni-app中,監(jiān)聽頁面滾動(dòng)可以使用onPageScroll生命周期函數(shù)或@scroll事件監(jiān)聽器,onPageScroll適用于監(jiān)聽整個(gè)頁面的滾動(dòng)事件,而@scroll事件監(jiān)聽器適用于監(jiān)聽特定組件如scroll-view的滾動(dòng),這兩種方法的選擇取決于監(jiān)聽需求的不同,需要的朋友可以參考下

前言

在uni-app中，監(jiān)聽頁面滾動(dòng)通常使用onPageScroll生命周期函數(shù)或者@scroll事件監(jiān)聽器，具體使用哪個(gè)取決于你的場(chǎng)景和需要。以下將分別介紹這兩種方式。

1. 使用onPageScroll生命周期函數(shù)

onPageScroll是uni-app頁面特有的生命周期函數(shù)，當(dāng)頁面滾動(dòng)時(shí)觸發(fā)。該函數(shù)接收一個(gè)對(duì)象作為參數(shù)，該對(duì)象包含滾動(dòng)相關(guān)的信息，如scrollTop（垂直滾動(dòng)距離）、scrollLeft（水平滾動(dòng)距離）等。

export default {
onPageScroll: function(e) {
console.log('滾動(dòng)距離：', e.scrollTop); // 垂直滾動(dòng)距離
// 這里可以根據(jù)e對(duì)象中的值來執(zhí)行相應(yīng)的操作
},
// 其他頁面生命周期函數(shù)或數(shù)據(jù)、方法等
}

注意：onPageScroll主要用于監(jiān)聽整個(gè)頁面的滾動(dòng)事件，而不是某個(gè)單獨(dú)組件或元素的滾動(dòng)。

2. 使用@scroll事件監(jiān)聽器

如果你的需求是監(jiān)聽某個(gè)特定組件（如scroll-view）的滾動(dòng)事件，那么應(yīng)該使用@scroll事件監(jiān)聽器。scroll-view是uni-app提供的一個(gè)可滾動(dòng)視圖區(qū)域的組件，類似于HTML的div元素但增加了滾動(dòng)功能。

首先，你需要在頁面的.vue文件中使用scroll-view組件，并通過@scroll屬性綁定一個(gè)處理函數(shù)來監(jiān)聽滾動(dòng)事件。

<template>
<view>
<scroll-view class="scroll-view" scroll-y="true" @scroll="handleScroll">
<!-- 這里是你的滾動(dòng)內(nèi)容 -->
<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('滾動(dòng)事件觸發(fā)', e.detail.scrollTop); // 獲取滾動(dòng)條距離頂部的距離
// 這里可以執(zhí)行你想要的邏輯
}
}
}
</script>
<style>
.scroll-view {
height: 300px; /* 限定高度以產(chǎn)生滾動(dòng) */
width: 100%;
}
.scroll-item {
height: 50px; /* 示例高度 */
line-height: 50px;
text-align: center;
border-bottom: 1px solid #ccc;
}
</style>

在這個(gè)例子中，scroll-view組件的scroll-y="true"屬性表示允許垂直滾動(dòng)，@scroll="handleScroll"綁定了滾動(dòng)事件的處理函數(shù)handleScroll。在handleScroll函數(shù)中，你可以通過e.detail.scrollTop獲取到滾動(dòng)條距離頂部的距離，并據(jù)此執(zhí)行相應(yīng)的邏輯。