微信小程序上拉加載和下拉刷新（wepy）

2018/07/16更新

 經過測試發現，wepy列表上拉加載更多時出現渲染延遲或者渲染不全，造成這個原因是page過渡動畫中設置了animation-fill-mode: both;這個屬性，去掉之后渲染正常。應該不是兼容性問題，因為在原生上測試加上這一屬性是渲染正常的，不明所以。。。

---

 

這篇隨筆主要是記錄在用wepy寫小程序下拉刷新和上拉加載功能時遇到的數據顯示不完全的問題及解決方法。

網上很多關於小程序的上拉加載和下拉刷新的文章的實現方法，無非兩種，一是用scroll-view組件，另一種則是使用onReachBottom()和onPullDownRefresh()兩個頁面事件處理函數。

scroll-view實現不好的是不能使用onPullDownRefresh，只能檢測滾動到頂部觸發刷新或者其它動畫操作，以及在其內部使用textarea、map、canvas、video等組件會有各種不適。

所以，最理想的方法是檢測onReachBottom來進行更多數據加載和改變加載動畫，檢測onPullDownReFresh進行數據更新（官方支持動畫）。

方案一（scroll-view）：

<scroll-view @scroll="handleScroll"
              @scrolltoupper="upper"
              @scrolltolower="loadMore"
              scroll-top="{{scrollTop}}"
              scroll-y
              scroll-with-animation="{{true}}"
              style="height: 100%;">
  <view wx:for="{{data}}" wx:key="{{index}}">
    <!--復雜的內容條目-->
  </view>
  <!--加載動畫&提示切換-->
  <view>
    <view hidden="{{!hasNext}}"></view>
    <view>{{hasNext?'正在加載':'無更多數據'}}</view>
  </view>
</scroll-view>

　　

這個方案如果不要求有下拉動畫是挺好的，至少數據渲染時正常。

方案二（page頁面事件函數）：

　　 <view wx:for="{{dataList}}"
          wx:key="{{index}}">
      <!--復雜內容填充-->
    </view>
    <view  wx:if="{{hasNext}}" style="padding: 5px;text-align: center">
      正在加載
    </view>

　　相關方法：

    onPullDownRefresh() {
      //請求數據更新
    }
    onReachBottom(event) {
      //請求更多數據
    }

　　上面這樣子是渲染正常的，但如果“正在加載”換成方案一那種較復雜的判斷，在安卓下則會出現渲染不完全。查看元素是已經渲染的了，可是就是有半截沒顯示，由於用的是wepy所以不確定是小程序本身問題，還是wepy 臟檢的問題。后續再寫原生測下。

　　注意：用方案二可能ios下會滾動卡頓的問題，參考：微信小程序ios端overflow:auto滾動卡頓