uniapp實現(xiàn)上拉加載更多功能的全過程
更新時間：2022年10月14日 08:44:47 作者：如舊呀
我們在項目中經(jīng)常使用到上拉加載更多,下面這篇文章主要給大家介紹了關(guān)于uniapp實現(xiàn)上拉加載更多功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
一、添加全部
1.在主頁面中添加一列
data.unshift({
name:'全部'
}) //添加一列 ‘全部'
2.改云函數(shù)
（累了 直接上代碼）這里match匹配空對象相當(dāng)于全部哈
'use strict';
const db=uniCloud.database()//1.創(chuàng)建引用
exports.main = async (event, context) => {
//event為客戶端上傳的參數(shù)
const {
name
} = event//等同 var name=event.name
let matchObj={}
if (name !== '全部') {
matchObj = {
classify: name
}
}
const list =await db.collection('article') //2.創(chuàng)建
.aggregate()//獲取聚合操作實例
.match(matchObj)//篩選出classify是前端開發(fā)的
.project({
content:0
})//類似.field
.end()
return {
code: 200,
msg: '數(shù)據(jù)請求成功',
data: list.data
}
};
3.插件市場導(dǎo)入 加載中組件
二、實現(xiàn)上拉加載
上拉加載實際上把一頁分成好幾頁來加載，拉一下就加載一點點 就這樣
1.云函數(shù)中可以接收參數(shù)
'use strict';
const db=uniCloud.database()//1.創(chuàng)建引用
exports.main = async (event, context) => {
//event為客戶端上傳的參數(shù)
const {
name,
page = 1,
pageSize = 10
} = event//等同 var name=event.name
let matchObj={}
if (name !== '全部') {
matchObj = {
classify: name
}
}
const list =await db.collection('article') //2.創(chuàng)建
.aggregate()//獲取聚合操作實例
.match(matchObj)//篩選出classify是前端開發(fā)的
.project({
content:0
})//類似.field
.skip(pageSize * (page - 1))
.limit(pageSize)//返回幾條數(shù)據(jù)？
.end()
return {
code: 200,
msg: '數(shù)據(jù)請求成功',
data: list.data
}
};2.獲取下拉事件
<scroll-view class="list-scroll" scroll-y @scrolltolower="loadmore">
傳呀傳
methods:{
loadmore(){
this.$emit('loadmore')
}
}傳呀傳
傳到頭啦
3.寫觸發(fā)這個下拉干嘛
loadmore() {
if (this.load[this.activeIndex].loading === 'noMore') return
this.load[this.activeIndex].page++
this.getList(this.activeIndex)
},getList里面
getList(current) {
if (!this.load[current]) {
this.load[current] = {
page: 1,
loading: 'loading'
}
} //分離page 不能讓他們共享一個
console.log('當(dāng)前的頁數(shù)', this.load[current].page);
this.$api.get_list({ //傳三個參數(shù)
name: this.tab[current].name,
page: this.load[current].page,
pageSize: this.pageSize
}).then(res => {
console.log(res);
const {
data
} = res
if (data.length === 0) {
let oldLoad = {}
oldLoad.loading = 'noMore'
oldLoad.page = this.load[current].page
this.$set(this.load, current, oldLoad)
// 強制渲染頁面
this.$forceUpdate()
return
}
let oldList = this.listCatchData[current] || []
oldList.push(...data)
this.$set(this.listCatchData, current, oldList)
})
}完整代碼：
<template>
<swiper @change="change" :current="activeIndex" style="height: 100%">
<swiper-item style="height: 100%" v-for="(item ,index) in tab" :key="index" class="swiper-item">
<list-item :list="listCatchData[index]" :load="load[index]" @loadmore="loadmore"></list-item>
</swiper-item>
</swiper>
</template>
<script>
export default {
name: "list",
props: {
tab: {
type: Array,
default () {
return []
}
},
activeIndex: {
type: Number,
default: 0
}
},
data() {
return {
list: [],
// js 的限制 listCatchData[index] = data
listCatchData: {},
load: {},
pageSize: 10
};
},
watch: {
tab(newVal) {
//如果是新的tab
if (newVal.length === 0) return
this.listCatchData = {}
this.load = {}
this.getList(this.activeIndex)
}
},
methods: {
loadmore() {
//if ‘沒有更多數(shù)據(jù)'就返回 不申請啦
if (this.load[this.activeIndex].loading === 'noMore') return
this.load[this.activeIndex].page++
this.getList(this.activeIndex)
},
change(e) {
const {
current
} = e.detail; //取到 current這個數(shù)據(jù)
this.$emit('change', current)
// TODO 當(dāng)數(shù)據(jù)不存在 或者 長度是 0 的情況下，才去請求數(shù)據(jù) 不用每次都加載已經(jīng)加載過的
if (!this.listCatchData[current] || this.listCatchData[current].length === 0) {
this.getList(current)
}
},
getList(current) {
if (!this.load[current]) {//分離page 不能讓他們共享一個
this.load[current] = {
page: 1,
loading: 'loading'
}
}
console.log('當(dāng)前的頁數(shù)', this.load[current].page);
this.$api.get_list({ //傳三個參數(shù)
name: this.tab[current].name,
page: this.load[current].page,
pageSize: this.pageSize
}).then(res => {
console.log(res);
const {
data
} = res
if (data.length === 0) //if沒有數(shù)據(jù)就搞它
let oldLoad = {}
oldLoad.loading = 'noMore'
oldLoad.page = this.load[current].page
this.$set(this.load, current, oldLoad)
// 強制渲染頁面
this.$forceUpdate()
return
}
let oldList = this.listCatchData[current] || []//解決每次加載覆蓋 沒有新的
oldList.push(...data)
this.$set(this.listCatchData, current, oldList)
})
}
}
}
</script>
<style lang="scss">
.home-swiper {
height: 100%;
.swiper-item {
height: 100%;
overflow: hidden;
.list-scroll {
height: 100%;
}
}
}
</style>在 顯示加載中的組件里面
<uni-load-more iconType="snow" :status="load.loading"></uni-load-more>
總結(jié)
到此這篇關(guān)于uniapp實現(xiàn)上拉加載更多功能的文章就介紹到這了,更多相關(guān)uniapp上拉加載更多內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了淺談Javascript如何實現(xiàn)勻速運動的方法及相關(guān)代碼,需要的朋友可以參考下2014-12-12
這篇文章主要給大家介紹了關(guān)于three.js利用卷積法如何實現(xiàn)物體描邊效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
關(guān)于javascript的“靜態(tài)類"...2006-10-10
這篇文章介紹了js replace 與replaceall實例用法詳解，有需要的朋友可以參考一下2013-08-08
本文是寫在2011年，主要介紹 “Firefox” 瀏覽器插件 “Firebug” 的操作，如今主流瀏覽器對控制臺都已經(jīng)提供了很好的支持。我自己用的最多是谷歌的 “chrome” 瀏覽器，下面也用 “chrome” 瀏覽器來調(diào)試。2015-06-06
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實現(xiàn)購物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要給大家介紹了關(guān)于JS中多層次排序算法的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
javascript動態(tài)添加checkbox復(fù)選框的方法
這篇文章主要介紹了javascript動態(tài)添加checkbox復(fù)選框的方法的相關(guān)資料,需要的朋友可以參考下2015-12-12
JavaScript面向?qū)ο蟪绦蛟O(shè)計創(chuàng)建對象的方法分析
這篇文章主要介紹了JavaScript面向?qū)ο蟪绦蛟O(shè)計創(chuàng)建對象的方法,結(jié)合實例形式分析了javascript使用object構(gòu)造函數(shù)和對象字面量來創(chuàng)建對象的相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
這篇文章主要給大家介紹了關(guān)于Javascript處理循環(huán)的異步操作的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-03-03