小程序中的下拉刷新、上拉加载更多

@一点儿

于 2021-05-15 19:31:36 发布

阅读量150

点赞数 2

文章标签：小程序

本文链接：https://blog.csdn.net/weixin_54534151/article/details/116860286

版权

本文介绍了如何在微信小程序中实现下拉刷新功能，通过`enablePullDownRefresh`配置启用，并利用`onPullDownRefresh`监听用户操作，重载第一页数据。同时，讲解了上拉加载更多机制，通过`onReachBottom`事件，当用户滚动到底部时，动态加载更多数据并合并展示。

摘要由CSDN通过智能技术生成

下拉刷新
思路：我们小程序有封装好的下拉动作，开启后，在使用小程序内置的监听用户下拉动作的函数，在里面重新请求第一页的数据
首先在我们要使用下拉刷新页面的json配置中写入

"enablePullDownRefresh":true, // 开启下拉刷新
"backgroundTextStyle":"dark" // 改变刷新时出现的样式，默认是白色。
1
2
然后在我们的开启下拉刷新的页面就可以下拉了。

onPullDownRefresh:function(){   // onPullDownRefresh 专门用来监听用户的下拉动作
            wx.request({            // 用户下拉后我们重新请求一次
            url:'https://wwwaksdha',
            data:{pagenum:1,pagesize:10},// 发送的参数        请求第一页的数据    每页10条数据
            method:'get',            // 请求方式
            success(res){
                this.setData({
                list:res.data.list // 我们重新赋值，让他渲染页面
                })
            }
        })
}

上拉加载更多
思路：当我们滚动条到底部的时候，我们就去请求下一页的数据，然后把请求过来的数据和原数据进行一个合并。
首先我们要知道一个小程序的内置函数，页面上拉触底事件的处理函数 onReachBottom

page({
    data:{
        pagenum:1,
        pagesize:10,
        list:[]
    },
onReachBottom: function () {         // 当我们滚动条到底触发的函数
    let oneself = this;        // 因为下边在一个函数中，他的this指向是改变的。
           wx.request({        // 重新发送请求
        url:'https://ashdkas',            // 请求路径
        data:{pagenum:this.data.pagenum,pagesize:this.pagesize},        // 请求参数  pagenum是当前页
        method:'get',             // 请求方式
        success(res){            // 成功回调
            oneself.setData({            // 修改数据
                list:[...oneself.data.list,...res.data.list]        // 我们让当前的数据和请求来的数据合并成一个数组
                // 我用到的是展开运算符，大概意思就是 把数组中的每一个元素都展开。
            });
        }
    })
  },
})