下拉刷新
首先要在该页面的json文件中开启上拉刷新
"enablePullDownRefresh":true
接着在js文件中进行逻辑代码操作
封装请求商品列表数据函数
async getGoodsList(){
//定义参数信息
var n=this.data.info
const res=await request({url:"/goods/search",data:n});
//获取商品总条数
const total=res.total;
//计算总页数并向上取整
this.totalPages=Math.ceil(total/n.pagesize);
//将请求到的商品数组展开并与原有商品列表数组进行合并
this.setData({
res:[...this.data.res,...res.goods]
})
//微信小程序api--终止下拉刷新
wx.stopPullDownRefresh();
},
//微信小程序api
onPullDownRefresh(){
//清空列表数据
this.setData({
res:[]
})
//将请求商品列表数据中参数里的pagenum重置为1
this.data.info.pagenum=1;
//调用请求商品列表数据函数
this.getGoodsList();
},
此时请求到的为第一页的商品信息,进行页面渲染,完成下拉刷新
上拉加载
微信api--触底事件wx.onReachBottom
onReachBottom(){
//首先判断是否已经到最后一页
if(this.data.info.pagenum>=this.totalPages){
wx.showToast({ title: '没有下一页数据' });
}else{
//如果没有到达底页,让页码加一
this.data.info.pagenum++;
//调用请求商品数据函数
this.getGoodsList();
}
},
更新res列表数组,重渲染页面,完成上拉加载