小程式提供了這個事件。

onPullDownRefresh()

監聽使用者下拉重新整理事件。

如果要開啟下拉重新整理功能，要先到json配置:

"enablePullDownRefresh":true

配置後下拉有反應了但是沒有載入效果，在onPullDownRefresh()事件介紹那裡沒有提到，在全域性配置那裡提到。

backgroundTextStyle

在json內加

"backgroundTextStyle": "dark"

下拉就有載入效果了。

 

現在做一個例子。

直接在js的Page上面定義一個數據當外部資料。

var mydata=[
      {name:'蘋果'},
      { name: '香蕉' },
      { name: '菠蘿' },
      { name: '雪梨' },
      { name: '葡萄' },
      { name: '荔枝' },
      { name: '芒果' },
      { name: '哈密瓜' },
      { name: '西瓜' },
      { name: '橙子' },
      ]
 

Page的data裡面;

data: {
    fruits: [],
  },

在onload裡面選取5個數據，即是頁面顯示5個數據。到時下拉再顯示剩下的資料。

let f = []
    for (let i = 0; i < 5; i++){
      f[i]= mydata[i].name
  }
   this.setData({
      fruits:f,
    })

在wxml頁面裡,支援for迴圈。

<view wx:for='{{fruits}}' wx:key='index' class="fruit">
{{item}}
</view>
 

wxss定義一下顯示樣式，加邊框字型框內居中;

.fruit{
  display: flex;
  margin: 10rpx;
  padding:10rpx 10rpx;
  align-content: center;
  justify-content: center;
  width: 150rpx;
  border: 1px solid #000
}

儲存如圖;

現在到mypage.js找到
onPullDownRefresh事件
在裡面寫上下拉重新整理顯示剩下的資料。取到剩下的資料加到原資料上。

let f = []
    let d=0
    for (let i = 5; i < mydata.length; i++) {
      f[d] = mydata[i].name
      d++
    }
    
    this.setData({
      fruits: this.data.fruits.concat(f),
    })
 

這樣一點下拉就將剩下的資料顯示出來了，但是沒有開始載入效果，和結束載入效果(在模擬器可能看不到明顯效果，用手機測試效果就明顯了)。加上如下程式碼。

wx.showNavigationBarLoading()//開始載入效果
wx.hideNavigationBarLoading()//完成停止載入
wx.stopPullDownRefresh() //停止下拉重新整理

onPullDownRefresh內完整程式碼;

wx.showNavigationBarLoading();
    let f = []
    let d=0
    for (let i = 5; i < mydata.length; i++) {
      f[d] = mydata[i].name
      d++
    }
    
    this.setData({
      fruits: this.data.fruits.concat(f),
    })
    wx.hideNavigationBarLoading()//完成停止載入
    wx.stopPullDownRefresh() //停止下拉重新整理

如圖；

這樣完成了下拉重新整理載入效果。

最近了解了一下微信小程式開發，順便做了個簡易畫板小程式

也瞭解了一下支付寶小程式（開放個人公測），做了一個簡易的文字備忘錄(加密)

相關推薦