小程序的下拉刷新和上拉加載更多，系統(tǒng)已經(jīng)提供方法砸抛。我這里就是利用系統(tǒng)的方法评雌，用自定義的UI和動畫去實現(xiàn)。

先附上效果圖
下拉刷新

上拉加載更多

這里寫圖片描述

• 第一步

想要利用系統(tǒng)的方法直焙，首先要開啟景东。開啟方法：在相應的.json文件里面添加"enablePullDownRefresh": true（當然，這個是默認開啟的奔誓，如果發(fā)現(xiàn)無法使用時耐薯，就手動再開啟一次）

• 第二步

需要在相應的.wxss文件添加加載動畫的樣式

.weui-loadmore {
  width: 100%;
  height: 100rpx;
  font-size: 30rpx;
  text-align: center;
  margin-top: 30rpx;
}

.weui-loading {
  width: 50rpx;
  height: 50rpx;
  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-tips {
  display: inline-block;
  vertical-align: middle;
}

• 第三步

在相應的.js文件添加標識

hasMoreData: true,
isRefreshing: false,
isLoadingMoreData: false

• 第四步 下拉刷新和上拉加載更多

利用系統(tǒng)下拉刷新方法onPullDownRefresh

onPullDownRefresh: function () {
    if (this.data.isRefreshing || this.data.isLoadingMoreData) {
      return
    }
    this.setData({
      isRefreshing: true,
      hasMoreData: true
    })
    this.requestData()//數(shù)據(jù)請求
  },

利用系統(tǒng)的上拉加載更多方法onReachBottom

onReachBottom: function () {
    if (this.data.isRefreshing || this.data.isLoadingMoreData || !this.data.hasMoreData) {
      return
    }

    this.setData({
      isLoadingMoreData: true
    })
    this.requestData()//數(shù)據(jù)請求
  },

• 第五步 在相應的.wxml文件添加布局代碼

（1）在列表的頭部添加下拉刷新的布局

<view class="weui-loadmore" wx:if='{{isRefreshing}}'>
  <view class="weui-loading"></view>
  <view class="weui-loadmore-tips">正在刷新...</view>
</view>

（2）在列表的底部添加上拉加載更多的布局

<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">沒有更多內(nèi)容啦</view>
  </view>
</view>

至此，自定義的下拉刷新和上拉加載更多就完成了

收錄：https://blog.csdn.net/liumude123/article/details/80401175