150      阿裏雲  技術社區[雲棲]

微信小程序開發之上拉刷新

小程序的頂部和底部都有默認的監聽事件，這個組件的官方文檔scroll-view，這個組件的屬性如下：

scroll-view

可滾動視圖區域

其中scroll-y,bindscrolltolower,bindscrolltoupper三個組件是分頁需要用到的。

實現程序

1. 我們需要在*.wxml中聲明這個組件，組件內容加入需要展示的內容

   <!--
   - scroll-y="true" 為縱向滾動的必要聲明
   - bindscrolltolower="loadMore" 為頁麵底部的監聽事件，即上拉刷新事件
   - bindscrolltoupper="refresh" 為頁麵頂部的監聽事件，即下拉刷新事件
   -->
   <scroll-view   scroll-y="true" bindscrolltolower="loadMore" bindscrolltoupper="refresh">
       <!--內容部分-->
       <view >
         <view wx:for="{{content}}" wx:key="item">
          ……
         </view>
       </view>
   </scroll-view>
   

2. 針對頂部和底部的監聽事件進行業務處理

   //獲取應用實例
   var app = getApp();
   Page({
     data: {
       userInfo: {},
       content: [],
       winHeight: 0
     },
     page: {//分頁查詢參數
       pageNum: 1,//初始頁碼
       pageSize: 10,//單頁條數
       dataSize: 0,//總數據條數，初始為0
       hasRefresh: true //刷新狀態
     },
     onLoad: function () {//頁麵初始加載事件
       var that = this;//複製this對象到臨時變量
       wx.getSystemInfo({
         success: function (res) {
           that.setData({
             winHeight: res.windowHeight
           });
         }
       })
       loadData(that);
     },
   
     loadMore: function () {
       wx.showToast({
         title: '刷新中…',
         icon: 'loading',
         duration: 1000
       });
       var that = this;
       loadData(that);
     },
     refresh: function () {
       console.log("下拉刷新....")
       this.onLoad();
     }
   })
   //數據加載
   var loadData = function (that) {
     var pageCount = 1;
     if (that.page.dataSize > 0 && that.page.dataSize % that.page.pageSize == 0) {
       pageCount = parseInt(that.page.dataSize / that.page.pageSize);
     } else {
       pageCount = parseInt(that.page.dataSize / that.page.pageSize) + 1;
     }
     if (!that.page.hasRefresh) {
       return;
     }
     that.page.hasRefresh = false;//阻塞標識符，防止本次處理未結束前出現重複請求
     var limit_start = that.page.pageSize * (that.page.pageNum - 1);
     var limit_end = that.page.pageSize * that.page.pageNum;
     if (that.page.pageNum > pageCount) {
       return;
     }
     wx.request({
       url: 'https://*****/goods/list',
       data: {
         limit_start: limit_start,
         limit_end: limit_end
       },
       method: 'GET',
       header: {
         'content-type': 'application/json'
       },
       success: function (res) {
         that.setData({
           content: that.data.content.concat(res.data.list)
         });
         that.page.dataSize = limit_start == 0 ? res.data.dataSize : that.page.dataSize;
         that.page.pageNum++;
         that.page.hasRefresh = true;//釋放阻塞
       }
     })
   }
   

注意事項

1. 分頁數據拚裝到一頁進行顯示時，需要將每次請求的結果集進行合並處理，參考上文中 success: function (res) { that.setData({ 'content: that.data.content.concat(res.data.list)' }); }
2. scroll-view標簽設置了bindscrolltolower，實現上拉加載時，數據重複請求 小程序的請求處理需要一定時間，而實際使用中，在請求結束前經常發生多次觸發底部監聽事件的情況，小程序組件中並為對此做處理，需要我們額外增加標識位來阻塞重複請求，參考樣例代碼中hasRefresh的處理

最後更新：2017-06-24 17:32:49

  上一篇：  BDFF 2017大數據金融論壇8月23-24日上海舉行！

  下一篇：  空間複合索引加速空間搜索