scroll-view組件實現下拉刷新, 拉到底加載更多

官方文檔已聲明，即使在page.json和app.json中開啟下拉刷新，scroll-view組件也是不支持的。但我們可以通過曲線救國的方法來實現

實現代碼

// wxml
 <scroll-view  style='height: 300px;' 
    scroll-y="{{true}}" 
    scroll-top="{{scrollTop}}"
    bindscroll="scrollFn"
    bindscrolltolower="loadMore"
  >   
    <view class="list" wx:for="{{list}}" wx:key="{{index}}">{{item}}</view>
 </scroll-view>  

 

// js
Page({
  data: {
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    timer: null, // 保存定時器
    scrollTop: 5 // 設定觸發條件的距離
  },
  onPullDownRefresh() {
  // 監聽該頁面用戶下拉刷新事件
  // 可以在觸發時發起請求，請求成功后調用wx.stopPullDownRefresh()來結束下拉刷新
   console.log('下拉拉拉')
  },
  refresh() { // 函數式觸發開始下拉刷新。如可以綁定按鈕點擊事件來觸發下拉刷新
    wx.startPullDownRefresh({
      success(errMsg) {
        console.log('開始下拉刷新', errMsg)
      },
      complete() {
        console.log('下拉刷新完畢')
      }
    })，
  },
  scrollFn(e) { 
  // 防抖，優化性能
  // 當滾動時，滾動條位置距離頁面頂部小於設定值時，觸發下拉刷新
  // 通過將設定值盡可能小，並且初始化scroll-view組件豎向滾動條位置為設定值。來實現下拉刷新功能，但沒有官方的體驗好
    clearTimeout(this.timer)
    if (e.detail.scrollTop < this.data.scrollTop) {     
      this.timer = setTimeout( () => {
        this.refresh()
      }, 350)
    }
  },
  loadMore() { // 觸底加載更多
        let len = this.data.list.length,
        lastItem = this.data.list[len - 1];
        for(let i = 0; i< len; i++) {
          this.data.list.push(lastItem + i + 1)
          this.setData({
            'list': this.data.list
          })
        }
   }
})

 

onPullDownRefresh 和 wx.startPullDownRefresh 的區別

onPullDownRefresh : 下拉刷新。官方認為下拉一定距離並釋放，為一次完整的下拉刷新，頁面的onPullDownRefresh 才能監聽到。因此，如果觸發開始下拉，但仍長按不釋放，不會被識別為一次完整的下拉刷新，onPullDownRefresh 無法監聽到
wx.startPullDownRefresh：開始下拉刷新。因此即使下拉一定距離觸發仍長按不釋放，也能觸發。

說的有點亂，可以按正常下拉釋放和下拉並長按一段時間再釋放，來查看控制台結果的差異

 

轉 : https://blog.csdn.net/ishowman/article/details/79536163