列表刷新樣式如圖
刷新： 其實(shí)是有三個(gè)白點(diǎn)的 微信自帶的刷新樣式

image

上拉加載：轉(zhuǎn)圈圈動(dòng)畫在wxss里面的樣式

image

image

對應(yīng)的.js .wxml .wxss .json文件如下，通用代碼可直接貼去用，唯一要修改的是requestData()方法里的網(wǎng)絡(luò)請求數(shù)據(jù)。

.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">沒有更多數(shù)據(jù)了</view>
</view>

.js

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    isHideLoadMore: true,
    isHideNoMore: true,
    isClear: true, //用來判斷是否清除原列表數(shù)組數(shù)據(jù)，刷新要清空數(shù)組數(shù)據(jù)，上拉加載不需要清空數(shù)組而是page++之后訪問到的數(shù)組concat進(jìn)原數(shù)組
    pageNum: 1,
    totalPage: 0,
    list:[],
  },
      
   /**
   * 訪問請求搜索接口
   */
  requestData: function () {
  // TODO：請求列表數(shù)據(jù) 
    let that = this

    wx.request({
      url: that.data.URL,
      data: {//接口入?yún)?        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)
  },
      
   /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () {
    let that = this

    //判斷雙擊點(diǎn)擊時(shí)間點(diǎn)
    that.setData({
      pageNum: 1,
      isHideNoMore: true,
      isClear: true,
    })

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

    that.requestData()
  },
      
      /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
   */
  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)
  },

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  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"
}

如果對您有所幫助，請給個(gè)贊吧。
如果有干貨請留言交流一波。