首頁 >微信小程式 >小程式開發 >微信小程式清單下拉刷新及上拉載入的實作方法分析

微信小程式清單下拉刷新及上拉載入的實作方法分析

小云云原創: 2017-12-07 15:59:566580瀏覽

本文實例講述了微信小程式清單渲染功能之列表下拉刷新及上拉載入的實作方法。分享給大家供大家參考，具體如下：

微信小程序為2017年1月9日打下了一個特殊的標籤，迅速刷爆了網絡和朋友圈，最近我也寫了一個demo程序體驗一把。微信小程式和vuejs有些像，都是資料驅動視圖&單向資料綁定，而其體驗要比H5頁面好很多，這得益於微信環境的支援以及首次運行時同時載入所有頁面的處理。本文將分享微信小程式清單的下拉刷新和上劃載入的實作。

效果圖

首先來看看程式效果圖，以下四張圖由左至右依序為：下來刷新動畫、下拉刷新結果、上劃加載動畫以及上劃加載結果，程式中的數據均為模擬數據，不包含網絡請求，所以可以直接運行。

方法一：用scroll-view元件實作

##因為最後沒有選擇這個實作方法（下拉刷新有bug），因此只做簡單介紹，當然如果沒有下拉刷新的需求，scroll-view組件實現列表的渲染很方便，從官方文檔可以看到，scroll-view組件集成了以下方法為編程提供很大便捷。

scroll-into-view String 值應為某子元素id，則捲動至該元素，元素頂部對齊捲動區域頂部
bindscrolltoupper EventHandle 捲動到頂部/左邊，會觸發scrolltoupper 事件
bindscrolltolower EventHandle 捲動到底部/右邊，會觸發scrolltolower 事件
#bindscroll EventHandle 滾動時觸發event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

#方法二：用page頁面自帶的功能

Page() 函數用來註冊一個頁面。接受一個 object 參數，其指定頁面的初始資料、生命週期函數、事件處理函數等。

1、在app.json頁設定視窗前景色為dark & 允許下拉

"window":{
  "backgroundTextStyle":"dark",
  "navigationBarBackgroundColor": "#000",
  "navigationBarTitleText": "wechat",
  "navigationBarTextStyle":"white",
  "enablePullDownRefresh": true
}

##2、在list.json頁設定允許下拉

{
  "enablePullDownRefresh": true
}

3、利用onPullDownRefresh監聽使用者下拉動作

註：在捲動scroll-view 時會阻止頁面回彈，所以在scroll-view 中捲動無法觸發onPullDownRefresh，因此在使用scroll-view 元件時無法利用page的該特性。

onPullDownRefresh: function() {
 wx.showNavigationBarLoading() //在标题栏中显示加载
 let newwords = [{message: &#39;从天而降&#39;,viewid:&#39;-1&#39;,time:util.formatTime(new Date),greeting:&#39;hello&#39;}].concat(this.data.words);
 setTimeout( ()=> {
   this.setData({
     words: newwords
   })
   wx.hideNavigationBarLoading() //完成停止加载
   wx.stopPullDownRefresh() //停止下拉刷新
  }, 2000)
}

4、利用onReachBottom頁面上拉觸底事件

註：,第一次進入頁面，如果頁面不滿一屏時會觸發onReachBottom ，應為只有用戶主動上拉才觸發；手指上拉，會觸發多次onReachBottom，應為一次上拉，只觸發一次；所以在編程時需要將這兩點考慮在內。

onReachBottom:function(){
  console.log(&#39;hi&#39;)
  if (this.data.loading) return;
  this.setData({ loading: true });
  updateRefreshIcon.call(this);
  var words = this.data.words.concat([{message: &#39;土生土长&#39;,viewid:&#39;0&#39;,time:util.formatTime(new Date),greeting:&#39;hello&#39;}]);
  setTimeout( () =>{
    this.setData({
     loading: false,
     words: words
    })
  }, 2000)
 }
})

#5、上劃載入圖示動畫

/**
 * 旋转刷新图标
 */
function updateRefreshIcon() {
 var deg = 0;
 console.log(&#39;旋转开始了.....&#39;)
 var animation = wx.createAnimation({
  duration: 1000
 });
 var timer = setInterval( ()=> {
  if (!this.data.loading)
   clearInterval(timer);
  animation.rotateZ(deg).step();//在Z轴旋转一个deg角度
  deg += 360;
  this.setData({
   refreshAnimation: animation.export()
  })
 }, 2000);
}

最後附上佈局程式碼：

<view wx:for="{{words}}" class="item-container">
  <view class="items">
    <view class="left">
       <view class="msg">{{item.message}}</view>
       <view class="time">{{item.time}}</view>
    </view>
    <view class="right">{{item.greeting}}</view>
  </view>
</view>
<view class="refresh-block" wx:if="{{loading}}">
 <image animation="{{refreshAnimation}}" src="../../resources/refresh.png"></image>
</view>

微信小程式清單下拉刷新及上拉載入的實作方法分析

相關文章