小程序列表分页效果
1.需求
触底分页加载列表
2.代码
Talk is cheap. Show me the code
page.js
Page({
/**
* 页面的初始数据
*/
data: {
page:0,//当前页
pages:0,//每页条数
total:0,//总条数
shop:[]//商品列表
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//重新初始化,isMerge = false
getList(this);
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
//下拉刷新,重新初始化,isMerge = false
getList(this);
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
setPage(this);
}
})
/**
* method:分页加载控制函数
*
*/
function setPage(that) {
const {
page,
pages,
total
} = that.data;
const totalPages = getTotalPages(total,pages);
if (page >= totalPages || that.isLoading) {
//控制触底是否加载需要两个条件,满足一下两个条件,都不能调用请求函数
// 1.当前页是最后一页,
// 2. 正在加载中
return
}
//分页加载需要传递isMerge=true参数,表示需要合并到原来的数组上
getList(that,true)
}
/**
* method:得到总页数
* @param {Number,String} total 列表总数
* @param {Number,String} pages 每一页的条数
* @return {Number} totalPages 总页数
*/
function getTotalPages(total,pages){
//总数除以每一页条数 如果余数!=0,结果需要+1
const remainder = Number(total) % Number(pages);
const value = Math.floor(total / pages);
const totalPages = remainder == 0 ? value : Number(value) + 1;
return totalPages
}
/**
* method:请求函数
* @param {Object} that page实例
* @param {Boolean} isMerge 是否将请求的结果合并到原来的列表数组中
*/
function getList(that,isMerge){
that.isLoading = true
wx.showLoading({
title: '加载中',
})
const data = {};
data.page = Number(that.data.page) + 1;
if(!isMerge){
//不合并,页码需要重新设置为1
data.page = 1;
}
wx.request({
url: 'http://192.168.2.113:3000/shop/list', // 仅为示例,并非真实的接口地址
data,
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
let shop = that.data.shop;
if (!isMerge) {
//不合并,shop需要初始化
shop = [];
}
shop = shop.concat(res.data.data.shop)||[];
that.setData({
shop,
page: res.data.data.page,
pages: res.data.data.pages,
total: res.data.data.total
})
},
fail(res){
},
complete:function(){
that.isLoading = false
wx.stopPullDownRefresh();
setTimeout(function(){
wx.hideLoading()
},500)
}
})
}
逻辑注释中都有,
json文件
需要在页面设置
1.允许下拉刷新
2.触底函数触发的距离
{
"usingComponents": {},
"navigationBarTitleText": "分页",
"onReachBottomDistance":200,
"enablePullDownRefresh": true
}
完