小程序上拉刷新，实现分页功能（亲测可用）

实现效果图：

从网上看到很多上拉刷新的代码，但是都不是太符合我的需求，没办法，自己写一个，同时分享出来供小伙伴们使用

1.json文件

enablePullDownRefresh设置为true

2.xml文件

<view wx:if='{{!isRefreshing}}' class="weui-loadmore">

    <view wx:if='{{isLoadingMoreData}}'>

      <view class="weui-loading"></view>

      <view class="weui-loadmore-tips">正在加载...</view>

    </view>

    <view wx:elif='{{hasMoreData}}'>

      <view class="weui-loadmore-tips" bindtap='onReachBottom'>点击加载</view>

    </view>

    <view wx:else>

      <view class="weui-loadmore-tips">暂无更多内容啦</view>

    </view>

  </view>

会根据需要提示用户正在加载、点击加载、暂无数据三种情况。

3.wxss文件

/*下拉刷新*/

.weui-loadmore {

  width: 100%;

  height: 80rpx;

  font-size: 30rpx;

  text-align: center;

  line-height: 80rpx;

}

 

.weui-loading {

  width: 50rpx;

  height: 50rpx;

  display: inline-block;

  vertical-align: middle;

  -webkit-animation: weuiLoading 1s steps(3, end) infinite;

  animation: weuiLoading 1s steps(3, end) infinite;

  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;

  background-size: 100%;

}

 

.weui-loadmore-tips {

  display: inline-block;

  vertical-align: middle;

}

4.js文件

首先设置isRefreshing、hasMoreData、isLoadingMoreData初始值，首次进入当前页面，截图xml中判断条件，会直接给用户显示点击加载提示，记住：如果不在获取数据后经过分析重新给hasMoreData赋值，那么没有数数据的时候也会展示“点击加载”，这样会不是很友好！

接下里就处理这个问题，为了方便演示

增加了一个数组list，用户存放接口返回的列表数据。下面的方法用户获取数据：

getList: function () {

    var that = this;

    var page = that.data.page;//页码，page也要写入data中，初始值1，即第一页

    wx.request({

      url: 'https://www.*****.com//getList', //你自己的接口路径

      data: {

        page: page

      },

      method: 'POST',

      header: {

        'content-type': 'application/json' // 默认值

      },

      success(res) {

        if (res.data.status == 1) {

          var list = res.data.data;

          var totalList = that.data.list;

          if (list.length > 0) {

            if (page > 1) {

              for (var i = 0; i < list.length; i++) {//这里主要用于将第一页以后的数据都存放在一个数组中

                totalList.push(list[i]);

              }

            }

            if (page == 1) {//如果是第一页

              totalList = list;

            }

            if(list.length==10){//这里我设置的每页10条数据

              that.setData({

                isRefreshing:false,

                list: totalList,

                page: page - 1 + 2

              });

            }else{

              that.setData({

                isRefreshing:false,

                hasMoreData:false,

                list: totaltList,

              });

            }

          } else {

            that.setData({

              isRefreshing: true,

              isLoadingMoreData: false,

              hasMoreData: false,

              list: totalList,

              page: page - 1 + 2,

            });

          }

        }

      }

    })

  },

别急，再重写上拉刷新方法：

// 上拉加载回调接口

  onReachBottom: function () {

    if (this.data.isRefreshing || this.data.isLoadingMoreData || !this.data.hasMoreData) {

      return

    }

    // 网络请求

    this.getList();

  },

最后一步：在onLoad中调用上面写的接口方法

this.getList();

ok，大功告成，如果有小伙伴有问题可以留言