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)文章
這篇文章主要為大家詳細(xì)介紹了JS百度地圖搜索懸浮窗功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
html的DOM中document對象images集合用法實例
這篇文章主要介紹了html的DOM中document對象images集合用法,實例分析了images集合的語法與使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要向大家介紹了原生JS實現(xiàn)的LOADING效果的代碼，效果非常不錯，而且可以自定義顏色和速度，推薦給大家，希望大家能夠喜歡。2015-03-03
webpack 自動清理 dist 文件夾的兩種實現(xiàn)方法
這篇文章主要介紹了webpack 自動清理 dist 文件夾的兩種實現(xiàn)方法,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
js 數(shù)組實現(xiàn)一個類似ruby的迭代器
今天突然發(fā)現(xiàn)js的數(shù)組處理起來真是麻煩,代碼一些就是一大堆,相比起ruby的迭代器來真是遜色不少。2009-10-10
JavaScript使用prototype屬性實現(xiàn)繼承操作示例
這篇文章主要介紹了JavaScript使用prototype屬性實現(xiàn)繼承操作,結(jié)合實例形式詳細(xì)分析了JavaScript使用prototype屬性實現(xiàn)繼承的相關(guān)原理、實現(xiàn)方法與操作注意事項,需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)列表展開收起效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
如果要異步執(zhí)行一個函數(shù)，我們最先想到的方法肯定會是setTimeout,這里簡單介紹下，方便需要的朋友2014-08-08
JavaScript實現(xiàn)日期加減計算功能代碼實例，因為在js中沒有類似C#中的AddDays方法，所以要想實現(xiàn)日期加減的話，就需要自己寫函數(shù)來實現(xiàn)。2015-05-05
這篇文章主要介紹了JavaScript詞法作用域的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07