效果图:
分页查询云函数 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>