下拉刷新
1、在需要下拉刷新页面的json配置页,设置"enablePullDownRefresh":true,默认为false
2、在* 页面相关事件处理函数--监听用户下拉动作 * onPullDownRefresh() 中添加要刷新的内容。
上拉触底
1、在*页面上拉触底事件的处理函数* async onReachBottom() 中添加要触底刷新的内容
2、做分页显示时,需要在函数中添加判断是否为最后一页数据,否则小程序会自动随机读取。
以下为实例代码:
/**
* 页面的初始数据
*/
data: {
page:0,//表示第一页
totalCount:0,//数据条数
pageSizes:5,//每页显示5条记录
haveData:true,//数据库中存在记录
},
//获取数据库记录数
getTotalCount(){
return new Promise((resolve,reject)=>{
db.collection('cloudOrder').count().then(res=>{
this.setData({
totalCount:res.total
})
resolve({status:'ok'})
}).catch(e=>{
reject({status:e})
})
})
},
//获取订单列表
getOrderList(){
return new Promise((resolve,reject)=>{
const {orderAll,page,pageSizes,totalCount} = this.data;
//如果为最后一页,则返回
if(orderAll.length>=totalCount){
this.setData({
haveData:false
})
return;
}
wx.showLoading({
title: '加载中',
})
//调用云函数读取多表联合查询的内容
wx.cloud.callFunction({
name:"myfunctions",
data:{
type:"getOrder",
page,
pageSizes
}
}).then(res=>{
wx.hideLoading();
if(res.result.status == "success"){
const {orderAll} = this.data;
const newOrderArray = res.result.msg.list//返回的数组数据
this.setData({
orderAll:orderAll.concat(newOrderArray)
})
resolve({status:'ok'})
}
}).catch(err=>{
wx.hideLoading();
reject(err)
})
})
},
/**
* 生命周期函数--监听页面加载
*/
async onLoad(options) {
//获取记录数
await this.getTotalCount();
//console.log(this.data.totalCount)
await this.getOrderList();//读取初始化数据
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
async onPullDownRefresh() {
wx.showLoading()
this.data.page = 0
await this.getOrderList();//获取订单
wx.hideLoading()
wx.stopPullDownRefresh() //下拉刷新处理完毕后,要用wx.stopPullDownRefresh()来关闭
},
/**
* 页面上拉触底事件的处理函数
*/
async onReachBottom() {
this.data.page += 1
console.log(this.data.page)
await this.getOrderList();
},