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

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

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

前言

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

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

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

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

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

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

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

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

<template>
<view>
<scroll-view class="scroll-view" scroll-y="true" @scroll="handleScroll">
<!-- 這里是你的滾動內(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('滾動事件觸發(fā)', e.detail.scrollTop); // 獲取滾動條距離頂部的距離
// 這里可以執(zhí)行你想要的邏輯
}
}
}
</script>
<style>
.scroll-view {
height: 300px; /* 限定高度以產(chǎn)生滾動 */
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"綁定了滾動事件的處理函數(shù)handleScroll。在handleScroll函數(shù)中，你可以通過e.detail.scrollTop獲取到滾動條距離頂部的距離，并據(jù)此執(zhí)行相應的邏輯。