微信小程序上拉分页渲染刷新

👁 2020-08-05

问题如何在微信小程序中实现上拉分页渲染刷新

上拉加载，获取更多数据主要利用了微信官方文档API中的onReachBottom方法，它表示“页面上拉触底事件的处理函数”，就可以在这请求服务器获取新的数据并且添加到现有数据下面。

1 添加页码以及页容量

pagenum代表当前页码，pagesize表示页容量（一页多少条数据），totalpages表示总的页码

/**分页渲染的参数 */
QueryParams:{
pagenum:1,
pagesize:8,
totalPages:1
},

2 页面进行初始化数据

在onload函数中进行请求服务器初始化数据。

wx.request({
    url: 'http://xxxx/'+that.QueryParams.pagenum+"/"+that.QueryParams.pagesize, 
    data: {
    },
    header: {
        'content-type': 'application/json' // 默认值
    },
    success (res) {
        console.log(res.data)    //从后端拿到所有的消息信息
        //计算后端传递数据过来的总的页码数=（总条数/页容量）
        that.QueryParams.totalPages=Math.ceil(res.data.data.total/that.QueryParams.pagesize);
        console.log(that.QueryParams.totalPages);
        that.setData({
        messagelist:res.data.data.rows //然后修改前端页面渲染的数据，后端数据内容具体看后端传递过来的（我这里是res.data.data.rows）
        })
    }
    })

3 请求加载更多数据

首先写一个请多更多数据的函数

async getMessagelistMore(){
    var that=this;
    wx.request({
    url: 'https://xxx/'+that.QueryParams.pagenum+"/"+that.QueryParams.pagesize, 
    data: {
    },
    header: {
        'content-type': 'application/json' // 默认值
    },
    success (res) {
        console.log(res.data)    //从后端拿到所有的消息信息
        //计算总的页数
        that.QueryParams.totalPages=Math.ceil(res.data.data.total/that.QueryParams.pagesize);
        console.log(that.QueryParams.totalPages);
        /**修改数组数据，将数组进行拼接 一定要进行数组拼接*/
        that.setData({
        messagelist:[...that.data.messagelist,...res.data.data.rows] 
        })
    }
    })   

},

然后在onReachBottom函数中进行填写代码，为了用户体验性，可以先显示加载图标，然后判断当前页码是否大于等于总页码，如果是，那么就意味着到底了，没有数据可以加载了，可以给出提示，如果不是，请求加载更多的数据

onReachBottom: function () {
    var that=this;
    //显示加载图标
    // wx.showLoading({
    //   title: '拼命加载中',
    // })
    wx.showToast({
    title: '拼命加载中',
    icon: 'loading',
    duration: 2000
    })
    //发送上拉加载请求
    if(that.QueryParams.pagenum>=that.QueryParams.totalPages)
    {
    wx.showToast({
        title: '已经到底啦',
    })
    }else{
    //页数加1
    that.QueryParams.pagenum++;
    that.getMessagelistMore();
        //隐藏加载框
        // wx.hideLoading();

    }


},