小程序上拉加載更多實現技巧及注意事項

一、選取適當的加載標誌

實現上拉加載更多首先要選擇合適的標誌來指示用戶，一個好的標誌可以增加用戶的體驗。常見的標誌方式包括：文字提示、loading圖標、骨架屏等，而且這些方式可以組合使用，比如同時使用loading圖標和文字提示。

代碼示例：

// wxml

  
    加載更多
    加載中
  
  
    沒有更多了
  


// wxss
.load-more {
  display: block;
  margin-top: 20rpx;
  text-align: center;
}
.loading-box {
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.loading-text {
  font-size: 34rpx;
  color: #999;
  margin-right: 10rpx;
}
.loading-img {
  animation: rotation 1.5s linear infinite;
  height: 36rpx;
  width: 36rpx;
}

.no-more__text {
  font-size: 34rpx;
  margin-top: 40rpx;
  color: #999;
}

二、使用scroll-view組件

scroll-view是小程序自帶的可滾動視圖容器組件，可以讓我們實現上下左右滑動的效果。使用scroll-view組件時，需要注意的是設置scrollView的高度和觸發 scrolltolower 事件的閾值。因為scroll-view默認高度為200px，因此我們可能需要手動設置高度。

代碼示例：

// wxml

  


// wxss
.scroll-view {
  height: 100%;
}

三、優化列表渲染

當加載更多時，需要新增數據進行渲染，這將導致重新渲染整個列表，而且當數據量龐大時會導致卡頓。解決這個問題的最常見方法是分批次加載數據，比如一次只加載10條，當用戶拉到底部時再繼續加載10條數據。此外，可以使用小程序官方提供的wx:key屬性，讓列表渲染時有一個唯一的標識，這樣可以避免出現重複渲染的情況。

代碼示例：

// wxml

  
    
  


// js
Page({
  data: {
    list: [], // 列表數據
    pageNum: 1, // 當前請求的頁碼
    limit: 10, // 每頁請求的條數
    isLoading: false, // 是否正在加載
    isEnd: false // 是否沒有更多數據了
  },
  onReachBottom: function() {
    // 已經全部加載完畢
    if (this.data.isEnd) return

    // 正在加載中
    if (this.data.isLoading) return

    // 開始加載
    this.setData({
      isLoading: true
    })
    this.loadData()
  },
  loadData(pageNum) {
    // 發起請求
    wx.request({
      url: 'xxxxxxx',
      data: {
        pageNum,
        limit: this.data.limit
      },
      success: (res) => {
        const {data} = res.data;
        let list = [];
        if(this.pageNum == 1) {
          list = data;
        } else {
          list = this.data.list.concat(data);
        }
        this.setData({
           list,
           pageNum: pageNum +1,
           isLoading: false,
           isEnd: data.length  {
        wx.showToast({
          title: '數據獲取失敗',
          icon: 'none',
          duration: 1500
        });
      }
    });
  }
})

四、注意事項

上拉加載更多要注意以下幾點：

1、保持UI友好：當沒有更多數據時應該給出明確的提示，這樣用戶不會一直拉動列表卻發現沒有新數據。

2、避免濫用loading：一個好的用戶體驗應該是迅速地獲得想要的內容，而不是一直等待loading。

3、節流與防抖：在觸發scrolltolower事件的時候，可能會出現用戶希望連續加載的情況，此時可以通過節流或防抖的方式來延遲函數的觸發。