1.在pages.json中设置页面触底的距离,默认50.
"onReachBottomDistance": 50
2.页面使用页面周期函数onReachBottom监听是否加载到底部
onReachBottom(){
console.log("触底啦---");
}
3.onReachBottom监听触底后,重新请求数据,并进行数据拼接
首次进入时,通过onLoad获取参数及发起初次请求
通过onReachBottom()声明周期函数监听到触底后,将pageNum+1,并重新发起请求
判断pageSize*pageNum >=total如果没有更多数据后,显示没有更多数据样式
data() {
return {
params: {
query: '',
cid: '',
pagenum: 1,
pagesize: 10
},
total: 0,
goodsList: [],
isBottom:false,
};
},
onLoad(options) {
this.params.cid = options.cid;
this.params.query = options.query;
// 发起请求
this.getGoodsList();
},
onReachBottom(){
this.params.pagenum += 1;
// 如果加载完成则显示触底样式
if(this.params.pagenum * this.params.pagesize >= this.total) return this.isBottom = true;
this.getGoodsList();
},
methods: {
async getGoodsList() {
const {
list
} = await unifyRequest(getGoodsList, this.params);
this.goodsList = [...this.goodsList,...list.goods];
this.total = list.total;
}
}