小程序列表分页效果

小程序列表分页效果

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
}

完