uniapp上拉載入更多詳解

一、uniapp上拉載入更多公共方法

uniapp上拉載入更多常用公共方法如下：

// 調用下拉刷新方法
this.$refs.loadmore.onTopLoaded();

// 調用上拉載入更多方法
this.$refs.loadmore.onBottomLoaded();

其中，onTopLoaded()方法用於在下拉刷新後重置上拉載入更多組件的狀態，可在頁面中調用。onBottomLoaded()方法用於在數據載入完成後重置上拉載入更多組件的狀態，可在請求介面回調函數中調用。

上拉載入更多組件需要在template中使用，如下示例：

  
    
    

    
    
      
        {{noMoreText}}
      
    
  

在script部分中，需要定義onTopEvent()方法和loadData()方法。

  export default {
    data() {
      return {
        // 上拉載入更多組件數據
        loadingText: '載入中...', // 載入中文本
        noMoreText: '沒有更多了' // 沒有更多文本
      }
    },
    methods: {
      // 下拉刷新回調函數，可選
      onTopEvent(done) {
        setTimeout(() => {
          // 渲染完數據後，調用done()方法結束下拉刷新狀態
          // done()方法將回調onTopLoaded()方法，重置上拉載入更多組件的狀態
          done();
        }, 1000);
      },

      // 上拉載入更多回調函數，必選
      loadData() {
        const page = this.page;

        // 請求介面，渲染數據
        // ...

        // 如果沒有更多數據，需要將組件狀態修改為「沒有更多了」
        if (!hasMoreData) {
          this.$refs.loadmore.noMore(); // this.$refs.loadmore為上拉載入更多組件對象
        } else {
          this.page++; // 頁碼+1
        }

        // 請求結束後，調用onBottomLoaded()方法重置上拉載入更多組件的狀態
        this.$refs.loadmore.onBottomLoaded();
      }
    }
  }

二、uniapp實現上拉載入更多

通過在頁面中引入上拉載入更多組件，即可實現上拉載入更多功能。

首先，在template中引入組件：

  
    
    

    
    
      
        {{noMoreText}}
      
    
  

然後，在script部分中實現onTopEvent()方法和loadData()方法，代碼示例與上面的公共方法部分相同。

三、uniapp上拉載入更多tp5

在使用uniapp上拉載入更多組件時，需要後端提供介面支持。以下是tp5框架下實現上拉載入更多的一些注意事項：

1、在介面中，需要返回當前頁的數據和總共的數據數量。例如：

{
  "data": [...], // 當前頁的數據
  "count": 100 // 總共的數據數量
}

2、在loadData()方法中，需要將總共的數據數量保存到data中。例如：

  export default {
    data() {
      return {
        // 上拉載入更多組件數據
        loadingText: '載入中...', // 載入中文本
        noMoreText: '沒有更多了', // 沒有更多文本
        total: 0 // 總共的數據數量
      }
    },
    methods: {
      loadData() {
        const page = this.page;

        // 請求介面，渲染數據
        // ...

        // 如果沒有更多數據，需要將組件狀態修改為「沒有更多了」
        if (!hasMoreData) {
          this.$refs.loadmore.noMore(); // this.$refs.loadmore為上拉載入更多組件對象
        } else {
          this.page++; // 頁碼+1
        }

        // 請求結束後，調用onBottomLoaded()方法重置上拉載入更多組件的狀態
        this.$refs.loadmore.onBottomLoaded();
      }
    }
  }

3、根據總共的數據數量，計算當前頁是否為最後一頁。例如：

  export default {
    data() {
      return {
        page: 1, // 頁碼
        pageSize: 10, // 每頁數據數量
        total: 0 // 總共的數據數量
      }
    },
    methods: {
      loadData() {
        const page = this.page;
        const pageSize = this.pageSize;

        // 請求介面，渲染數據
        // ...

        // 如果沒有更多數據，需要將組件狀態修改為「沒有更多了」
        if (page * pageSize >= this.total) {
          this.$refs.loadmore.noMore(); // this.$refs.loadmore為上拉載入更多組件對象
        } else {
          this.page++; // 頁碼+1
        }

        // 請求結束後，調用onBottomLoaded()方法重置上拉載入更多組件的狀態
        this.$refs.loadmore.onBottomLoaded();
      }
    }
  }

四、uniapp上拉載入更多組件

uniapp官方提供了一個上拉載入更多組件：loadmore。可以在uniapp官方文檔中查看詳細使用方法。

示例代碼：

  
    {{noMoreText}}
  

五、uniapp上拉載入更多數據

要實現uniapp上拉載入更多，需要先獲取當前頁碼和每頁數據數量。例如：

  export default {
    data() {
      return {
        page: 1, // 頁碼
        pageSize: 10 // 每頁數據數量
      }
    },
    methods: {
      loadData() {
        const page = this.page;
        const pageSize = this.pageSize;

        // 請求介面，渲染數據
        // ...

        // 請求結束後，調用onBottomLoaded()方法重置上拉載入更多組件的狀態
        this.$refs.loadmore.onBottomLoaded();
      }
    }
  }

註：以上代碼僅為示例，請求介面需要具體根據實際情況進行編寫。

六、uniapp上拉載入更多不生效

以下是一些常見的導致上拉載入更多不生效的原因：

1、沒有正確引入上拉載入更多組件。

2、loadData()方法沒有正確設置頁碼。

3、請求介面返回的數據格式不正確。

通過檢查以上幾個方面，可以解決上拉載入更多不生效的問題。