uniapp 分页查询的云函数与使用

效果图:
在这里插入图片描述

分页查询云函数 pagedQuery

'use strict';
const db = uniCloud.database()
exports.main = async (event, context) => {  //event为客户端上传的参数
	//前端调用此函数需要传入的参数:dbName ,filter ,pageIndex ,pageSize
	var dbName = event.dbName;  //集合名称(表的名称)
	var filter = event.filter ? event.filter : {} ;  //筛选条件,默认为空,格式 {key:'values'}
	var pageIndex = event.pageIndex ? event.pageIndex : 1 ;  //当前第几页,默认为第一页
	var pageSize = event.pageSize ? event.pageSize : 10 ;  //每页取多少条记录,默认为10条  

	const countResult = await db.collection(dbName).where(filter).count()  //获取集合中的总记录数
	const total = countResult.total  //得到总记录数 
	const totalPage = Math.ceil(total / pageSize)  //计算页数

	var hasMore ;  //提示前端是否还有数据
	if (pageIndex > totalPage || pageIndex == totalPage) {  //如果没有数据了,就返回false
		hasMore = false 
	} else {
		hasMore = true 
   }
   
	//查询数据并返回给前端
	return db.collection(dbName)
	.where(filter)
	.skip((pageIndex - 1) * pageSize)
	.limit(pageSize)
	.get()
	.then( res => {
		res.hasMore = hasMore ;
		return res ;  // 返回json给客户端
	})     
    
};

前端页面代码:

<template>
	<view class="content">
		<button class="btn" type="default" @click="btnInsert">增加云数据</button>
		<button class="btn" type="default" @click="btnSelect">查询云数据</button>
		<view class="userlist" v-for="(item,index) in datalist" :key="index">
			<text> {{item.username}} : {{item.age}} </text>
			<text v-if="item.sex ==null "> : 未知 </text>
			<text v-else>{{item.sex}} </text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hasMore:false ,
				pageIndex: 1 ,
				datalist:[]
			}
		},
		
		// 上拉触底事件
		onReachBottom:function( ) { 
			if (this.hasMore) {
				this.btnSelect()  //调用函数
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1000);
				
			} else {
				uni.showToast({
				  title: '没有更多数据了!',
				  icon:'none'
				})
			}      
		},
		
		methods: {
			//增加
			btnInsert() {
			
			},
			
			//查询
			btnSelect() {
				uni.showLoading({
					title: '查询中...'
				})
				uniCloud.callFunction({  //调用云函数
					name:'pagedQuery',  //云函数名称
					data:{  //以下是pagedQuery云函数需要传入的参数
						dbName:'table1',    //要查询的表名
						filter:{},          //筛选条件,格式{sex:'女'}
						pageIndex: this.pageIndex ,      //第几页
						pageSize: 30        //每页的记录条数
					},
					success: (res) => {
						console.log(res)
						this.datalist = this.datalist.concat(res.result.data)  //云端返回的查询数据,追加到数组datalist
						this.hasMore = res.result.hasMore  //云端返回的是否有更多数据
						if (this.hasMore) {
							this.pageIndex = this.pageIndex + 1
						}
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						uni.hideLoading()
					}
				});
			}
			
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;		
	}
	
	.btn{
		margin: 5px;
		background-color: #4CD964;
	}
</style>

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值