uniapp实现上拉加载更多

目录

一、添加全部

1.在主页面中添加一列

 2.改云函数

3.插件市场导入 加载中组件

二、实现上拉加载

1.云函数中可以接收参数

2.获取下拉事件

3.写触发这个下拉干嘛

在 显示加载中的组件里面

---

一、添加全部

1.在主页面中添加一列

data.unshift({
			name:'全部'
			}) //添加一列 ‘全部’

 

 2.改云函数

（累了 直接上代码）这里match匹配空对象相当于全部哈

'use strict';
const db=uniCloud.database()//1.创建引用
exports.main = async (event, context) => {
	//event为客户端上传的参数
	const {
		name
	} = event//等同 var name=event.name
	let matchObj={}
	if (name !== '全部') {
		matchObj = {
			classify: name
		}
	} 
	const list =await db.collection('article')	//2.创建
	.aggregate()//获取聚合操作实例
	
	.match(matchObj)//筛选出classify是前端开发的
	.project({
		content:0
	})//类似.field
	.end()
	return {
		code: 200,
		msg: '数据请求成功',
		data: list.data
	}
 };

3.插件市场导入 加载中组件

二、实现上拉加载

上拉加载实际上把一页分成好几页来加载，拉一下就加载一点点 就这样

1.云函数中可以接收参数

'use strict';
const db=uniCloud.database()//1.创建引用
exports.main = async (event, context) => {
	//event为客户端上传的参数
	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.创建
	.aggregate()//获取聚合操作实例
	
	.match(matchObj)//筛选出classify是前端开发的
	.project({
		content:0
	})//类似.field
	.skip(pageSize * (page - 1))
	.limit(pageSize)//返回几条数据？
	.end()
	return {
		code: 200,
		msg: '数据请求成功',
		data: list.data
	}
 };

2.获取下拉事件

传呀传

methods:{
			loadmore(){
				this.$emit('loadmore')
			}
		}

传呀传

传到头啦

3.写触发这个下拉干嘛

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('当前的页数', this.load[current].page);
				this.$api.get_list({ //传三个参数
					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)
				})
			}

完整代码：

在 显示加载中的组件里面