- 用户上滑页面 滚动条触底,开始加载下一页数据
- 找到滚动条触底事件 官方文档寻找。
- 判断还有没有下一页数据
- 获取到总页数,但现在只有总条数
总页数 = Math.ceil(总条数total / 页容量 pagesize)
总页数 = Math.ceil( 23 / 10 ) = 3
- 获取到总页数,但现在只有总条数
- 没有下一页数据,弹出提示
- 有下一页,加载下一页。
- 当前的页码 ++
- 重新发送请求
- 数据请求回来 要对data中的数组进行拼接,而不是全部替换。
goods_list/index.js
Page({
/**
* 页面的初始数据
*/
data: {
goodsList:[]
},
totalPages:1,
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options);
this.QueryParams.cid=options.cia;
this.getGoodList();
},
async getGoodList(){
const res = await request({url:"/goods/search",data:this.QueryParams});
console.log(res);
//获取总条数
const total = res.total;
//计算总页数
this.totalPages = Math.ceil(total/this.QueryParams.pagesize);
console.log(this.totalPages);
this.setData({
//拼接了数组
goodsList:[...this.data.goodsList,...res.goods]
})
},
//页面上滑 滚动条触底事件
onReachBottom(){
// console.log("页面触底");
if(this.QueryParams.pagenum>=this.totalPages){
//没有下一页
// console.log('%c'+"没有下一页数据了","color:red;font-size:100px;background-image");
wx.showToast({
title:'没有数据了'
})
}else{
// console.log('%c'+"有下一页数据","color:red;font-size:100px;background-image");
this.QueryParams.pagenum++;
this.getGoodList();
}
}
})
- 初始化 totalPages:1
- 拼接数组,不是覆盖!
- 页面++