微信小程序列表刷新（可通用）

列表刷新样式如图
刷新： 其实是有三个白点的 微信自带的刷新样式

image

上拉加载：转圈圈动画在wxss里面的样式

image

image

对应的.js .wxml .wxss .json文件如下，通用代码可直接贴去用，唯一要修改的是requestData()方法里的网络请求数据。

.wxml

<view class="weui-loadmore" hidden="{{isHideLoadMore}}">
 <view class="weui-loading"></view>
 <view class="weui-loadmore__tips">正在加载</view>
</view>

<view class="weui-loadmore" hidden="{{isHideNoMore}}">
 <view class="weui-loadmore__tips">没有更多数据了</view>
</view>

.js

  /**
   * 页面的初始数据
   */
  data: {
    isHideLoadMore: true,
    isHideNoMore: true,
    isClear: true, //用来判断是否清除原列表数组数据，刷新要清空数组数据，上拉加载不需要清空数组而是page++之后访问到的数组concat进原数组
    pageNum: 1,
    totalPage: 0,
    list:[],
  },
      
   /**
   * 访问请求搜索接口
   */
  requestData: function () {
  // TODO：请求列表数据 
    let that = this

    wx.request({
      url: that.data.URL,
      data: {//接口入参
        page: that.data.pageNum,
        ...: ...,
      },
      header: {
        'Content-Type': 'application/json'
      },
      success(res) {
        if (that.data.isClear) {
          that.setData({
            list: res.data.data.orderList,
            totalPage: res.data.data.totalPage,
          }
          )
        } else {
          that.setData({
            list: that.data.list.concat(res.data.data.orderList),
            totalPage: res.data.data.totalPage,
          }
          )
        }
        wx.hideLoading()
        
      }

    })
    setTimeout(function () {
      wx.hideLoading()
    }, 2000)
  },
      
   /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let that = this

    //判断双击点击时间点
    that.setData({
      pageNum: 1,
      isHideNoMore: true,
      isClear: true,
    })

    wx.showLoading({
      title: '加载中',
    })

    that.requestData()
  },
      
      /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    let that = this;
    that.setData({
      loadingimg: false,
      isHideNoMore: true,
      pageNum: 1,
      isClear: true
    })

    wx.showLoading({
      title: '加载中',
    })
      
    that.requestData()

    setTimeout(function () {
      wx.stopPullDownRefresh()
      that.setData({
        loadingimg: true
      })
    }, 1000)
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    let that = this;

    that.setData({
      isHideLoadMore: false,
      isHideNoMore: true,
      isClear: false,
    })

    if (that.data.pageNum >= that.data.totalPage) {
      setTimeout(() => {
        this.setData({
          isHideLoadMore: true,
          isHideNoMore: false,
        })
      }, 0)
      return;
    }

    that.data.pageNum++;
    that.requestData();

    setTimeout(() => {
      this.setData({
        isHideLoadMore: true,
      })
    }, 1000)
  },

.wxss

.weui-loading {
  margin: 0 5px;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  -webkit-animation: weuiLoading 1s steps(12, end) infinite;
  animation: weuiLoading 1s steps(12, end) infinite;
  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
  background-size: 100%;
}

.weui-loadmore {
  width: 65%;
  margin: 1.5em auto;
  line-height: 1.6em;
  font-size: 14px;
  text-align: center;
}

.weui-loadmore__tips {
  display: inline-block;
  vertical-align: middle;
}

.json

{
  "navigationBarTitleText": "售后列表",
  "enablePullDownRefresh": true,
  "backgroundColor": "#f8f8f8",
  "enableReachBottom": "true"
}

如果对您有所帮助，请给个赞吧。
如果有干货请留言交流一波。