在移動應(yīng)用開發(fā)中，無限滾動加載是一個常見的功能，用戶可以通過滑動屏幕來加載更多的內(nèi)容，從而提高應(yīng)用的用戶體驗。本文將介紹如何使用Uniapp實現(xiàn)無限滾動加載的功能。
概述
我們需要實現(xiàn)的無限滾動加載功能的具體效果如下：
-
當(dāng)用戶滑動到底部時，自動加載更多的數(shù)據(jù)。
-
在加載數(shù)據(jù)時，顯示一個加載動畫，防止用戶誤以為應(yīng)用已經(jīng)崩潰。
-
當(dāng)所有數(shù)據(jù)都已經(jīng)加載完畢時，提示用戶“沒有更多數(shù)據(jù)了”。
方案
我們可以通過以下步驟來實現(xiàn)無限滾動加載功能：
-
在
cs.vue組件中，使用uni.createIntersectionObserver()方法創(chuàng)建一個交叉觀察器，用于觀察加載動畫是否進入了用戶的視圖區(qū)域。 -
在交叉觀察器的回調(diào)函數(shù)中，判斷加載動畫是否進入了用戶的視圖區(qū)域，并根據(jù)需要加載更多的數(shù)據(jù)。
-
在加載數(shù)據(jù)時，使用事件來控制加載動畫的出現(xiàn)與隱藏。
-
當(dāng)所有數(shù)據(jù)都已經(jīng)加載完畢時，使用事件來控制“沒有更多數(shù)據(jù)了”的提示是否顯示。
-
在
index.vue組件中，引入cs.vue組件，并通過事件來控制加載動畫和“沒有更多數(shù)據(jù)了”的提示是否顯示。
實現(xiàn)
在cs.vue組件中，我們需要使用事件來控制加載動畫的出現(xiàn)與隱藏。具體來說，當(dāng)交叉觀察器的回調(diào)函數(shù)中判斷需要加載數(shù)據(jù)時，我們需要通過$emit方法觸發(fā)一個名為aaa的事件，并傳遞參數(shù)0，表示加載動畫需要出現(xiàn)。當(dāng)數(shù)據(jù)加載完畢后，我們再次觸發(fā)aaa事件，并傳遞參數(shù)1，表示加載動畫需要消失。代碼如下：
if (res.intersectionRatio > 0) {
this.$emit("aaa", 0); // 加載動畫出現(xiàn)
setTimeout(() => {
this.a += 10;
this.$emit("aaa", 1); // 加載動畫消失
}, 3000)
}
在cs.vue組件中，我們還需要使用事件來控制“沒有更多數(shù)據(jù)了”的提示是否顯示。具體來說，當(dāng)所有數(shù)據(jù)都已經(jīng)加載完畢時，我們需要通過$emit方法觸發(fā)一個名為aaa的事件，并傳遞參數(shù)2，表示“沒有更多數(shù)據(jù)了”的提示需要顯示。代碼如下：
if (this.a > 50) return this.$emit("aaa", 2);
在index.vue組件中，我們需要引入cs.vue組件，并通過事件來控制加載動畫和“沒有更多數(shù)據(jù)了”的提示是否顯示。具體來說，我們需要監(jiān)聽aaa事件，并根據(jù)傳遞的參數(shù)來控制加載動畫和“沒有更多數(shù)據(jù)了”的提示是否顯示。代碼如下：
<template>
<view class="container">
<text>{{appear === 0 ? '小球出現(xiàn)' : '小球消失'}}</text>{{appear}}
<view class="page-section">
<scroll-view class="scroll-view" scroll-y>
<cs :appear="appear" @aaa="(val) => appear=val"></cs>
</scroll-view>
</view>
</view>
</template>
<script>
import cs from './cs.vue';
let observer = null;
export default {
components: {
cs
},
data() {
return {
appear: 1
}
},
}
</script>最后，為了避免內(nèi)存泄漏，我們需要在cs.vue組件銷毀時將交叉觀察器斷開連接。具體來說，我們需要在onUnload生命周期函數(shù)中使用disconnect()方法將交叉觀察器斷開連接。代碼如下：
onUnload() {
if (observer) {
observer.disconnect()
}
}
至此，我們就完成了無限滾動加載的實現(xiàn)。完整代碼如下：
cs.vue組件代碼：
<template>
<view>
<view class="item" v-for="item of a" :key="item">
{{item}}鋤禾日當(dāng)午
</view>
<qiuy-loading class="ball" :class="{'is':appear===0}"></qiuy-loading>
<view v-show="appear===2">
沒有數(shù)據(jù)了
</view>
</view>
</template>
<script>
let observer = null;
import QiuyLoading from './QiuyLoading.vue'
export default {
components: {
QiuyLoading
},
props: ["appear"],
data() {
return {
a: 20
}
},
mounted() {
observer = uni.createIntersectionObserver(this);
observer.relativeTo('.scroll-view').observe('.ball', (res) => {
// 當(dāng)a》50時，停止加載
if (this.a > 50) return this.$emit("aaa", 2);
// 如果當(dāng)前狀態(tài)已經(jīng)在加載中，則不進行。
if (this.appear !== 1) return;
// 出現(xiàn)了
if (res.intersectionRatio > 60) {
// 先讓加載動畫顯示出來
this.$emit("aaa", 0);
setTimeout(() => {
this.a += 10;
// 加載出了數(shù)據(jù)，關(guān)閉加載動畫
this.$emit("aaa", 1);
}, 3000)
}
})
},
onUnload() {
if (observer) {
observer.disconnect()
}
}
}
</script>
<style>
.notice {
margin-top: 150rpx;
margin: 150rpx 0 400rpx 0;
}
.is {
height: auto;
overflow: hidden;
}
.item {
line-height: 100rpx;
font-size: 40rpx;
}
</style>index.vue組件代碼：
<template>
<view class="container">
<text>{{appear === 0 ? '小球出現(xiàn)' : '小球消失'}}</text>{{appear}}
<view class="page-section">
<scroll-view class="scroll-view" scroll-y>
<cs :appear="appear" @aaa="(val) => appear=val"></cs>
</scroll-view>
</view>
</view>
</template>
<script>
import cs from './cs.vue';
let observer = null;
export default {
components: {
cs
},
data() {
return {
appear: 1
}
},
}
</script>
<style>
.scroll-view {
height: 800rpx;
background: #fff;
border: 1px solid #ccc;
box-sizing: border-box;
/* padding-bottom: 30px; */
}
.scroll-area {
height: 1300rpx;
display: flex;
flex-direction: column;
align-items: center;
transition: .5s;
}
</style>QiuyLoading.vue里的內(nèi)容
<template>
<view class="loader">
<view class="l">L</view>
<view class="o">o</view>
<view class="a">a</view>
<view class="d">d</view>
<view class="i">i</view>
<view class="n">n</view>
<view class="g">g</view>
<view class="d1">.</view>
<view class="d2">.</view>
</view>
</template>
<script>
</script>
<style>
.loader {
text-align: center;
height: 0;
overflow: hidden;
}
.is {
height: auto;
padding-bottom: 20rpx;
}
</style>最后，看下效果吧！文章來源：http://www.zghlxwxcb.cn/news/detail-474923.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-474923.html
到了這里，關(guān)于uni-app小程序中做頁面滾動底部或頂部加載效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
