小程序下拉刷新上拉触底加载数据

忘是亡心i 2021-12-19 14:25 389阅读 0赞

### 1. 下拉刷新 ###

下拉刷新主要用到「onPullDownRefresh」函数，我们在新建目录然后新建page之后在wxml文件中会自动生成很多生命周期函数，其中就会生成「onPullDownRefresh」函数，所以没注意的同学会发现我写了「onPullDownRefresh」函数，但是没起作用的情况

**当然我们最先要做的是开启此功能，在「app.json」文件「window」对象中加入**

"enablePullDownRefresh": true

或者在页面对应的JSON文件中加入这个配置，例如我「list」目录下wxml对应的JSON文件就是「list.json」或者「index,json」

可以通过「wx.startPullDownRefresh」触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一样

当处理完数据刷新后，「wx.stopPullDownRefresh」可以停止当前页面的刷新

最后使用方法如下：

getData: function() {
        
        wx.cloud.callFunction({
          name: '',
          data: {
            type: 'get'
          },
          success: function(res) {
            .......
     
            // 停止下拉动作
            wx.stopPullDownRefresh();
          },
          fail: function() {
            
          }
        })
     
    }
     
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
      onPullDownRefresh: function () {
        this.getData(); // 这里写自己要调用的查询方法
      },

PS: 如果大家看不到动画，在「app.json」「window」对象中添加如下：

"backgroundTextStyle": "dark"

###    2. 上拉触底-加载更多数据 ###

上拉触底用到「**onReachBottom**」函数，直接上代码：

/**
     * 上拉触底
     */
    onReachBottom: function () {
        this.setData({
          curPage: this.data.curPage+1 // 一般上拉触底是为了加载更多分页数据，所以这里页数自增
        });
        this.getGoodsList(this.data.activeCategoryId, true) // 查询方法
      },

可以在「app.json」中的「window」对象下设置触发距离：

"onReachBottomDistance":50

在触发距离内滑动期间，本事件只会触发一次

小程序，附带[源码][Link 1]，相互学习

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3emhhbmcxMTAx_size_16_color_FFFFFF_t_70][]

定制属于你自己的婚礼邀请函，[源码][Link 2]，扫描直接体验

![E8_87_AA_E5_88_B6_E5_A9_9A_E7_A4_BC_E8_AF_B7_E6_9F_AC.jpg][]

私人影剧院，电影观影指南，[源码][Link 3]，扫码直接体验

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3emhhbmcxMTAx_size_16_color_FFFFFF_t_70 1][]

**需要入群交流的，可以加我微信：  bjawenfd  ，纯粹交流群互粉群**

[Link 1]: https://github.com/zhangliwen1101/WeatherWidget
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3emhhbmcxMTAx_size_16_color_FFFFFF_t_70]: /images/20211219/042861a6c8b942c8a0b95149586d246b.png
[Link 2]: https://github.com/zhangliwen1101/Marry
[E8_87_AA_E5_88_B6_E5_A9_9A_E7_A4_BC_E8_AF_B7_E6_9F_AC.jpg]: https://raw.githubusercontent.com/zhangliwen1101/Images/master/img/%E5%A9%9A%E7%A4%BC%E9%82%80%E8%AF%B7%E5%87%BD/%E8%87%AA%E5%88%B6%E5%A9%9A%E7%A4%BC%E8%AF%B7%E6%9F%AC.jpg
[Link 3]: https://github.com/zhangliwen1101/movies
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3emhhbmcxMTAx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190701152240102.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3emhhbmcxMTAx,size_16,color_FFFFFF,t_70