微信小程式實現列表下拉重新整理上拉載入，小程式下拉

小程式實現列表下拉重新整理上拉載入，小程式下拉

本文執行個體為大家分享了Android九宮格圖片展示的具體代碼，供大家參考，具體內容如下

DEMO下載

原理

利用小程式的onPullDownRefresh函數（下拉重新整理監聽函數）和onReachBottom函數（上拉載入監聽函數）監聽頁面的下拉和上拉動態，從而對頁面資料進行修改！

頁面配置JSON

• enablePullDownRefresh：開啟下拉重新整理；
• onReachBottomDistance：頁面上拉觸底事件觸發時距頁面底部距離，單位為px。
  

{ "enablePullDownRefresh": true, "onReachBottomDistance": 50}

WXML

<view class="tui-content"> <view class="tui-menu-list" wx:for="{{dataList}}">Item -- {{item}}</view></view>

JS

此處用setTimeout類比請求資料；
載入資料限制三次，調用wx.showToast顯示沒有更多資料。

Page({ data: { dataList: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20], count : 0 }, onPullDownRefresh(){ var self = this; setTimeout(() => {  // 類比請求資料，並渲染  var arr = self.data.dataList, max = Math.max(...arr);  for (var i = max + 1; i <= max + 3; ++i) {  arr.unshift(i);  }  self.setData({ dataList: arr });  // 資料成功後，停止下拉重新整理  wx.stopPullDownRefresh(); }, 1000); }, onReachBottom(){ var arr = this.data.dataList, max = Math.max(...arr); if (this.data.count < 3) {  for (var i = max + 1; i <= max + 5; ++i) {  arr.push(i);  }  this.setData({  dataList: arr,  count: ++this.data.count  }); } else {  wx.showToast({  title: '沒有更多資料了！',  image: '../../src/images/noData.png',  }) } }})

總結

必須在每次資料請求完成後，使用wx.stopPullDownRefresh()停止下拉重新整理。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。