UniApp實現無限滾動列表載入更多數據功能

一、什麼是無限滾動列表載入更多數據功能？

無限滾動列表載入更多數據功能，又叫做「無限滾動載入」、「滾動刷新」，是一種常見的列表展示方式。其核心設計思想是：當用戶滾動到頁面底部時，自動載入下一頁數據，以此類推，實現無限滾動的效果。該功能在移動端 App 中被廣泛使用，能夠提高用戶操作體驗，尤其是在數據量較大、有翻頁操作的場景下更為常用。

在本文中，我們將以 UniApp 為例，介紹如何快速實現無限滾動列表載入更多數據功能。

二、如何使用 UniApp 實現無限滾動列表載入更多數據功能？

1. 安裝 Mescroll-uni 組件庫

Mescroll-uni 是基於 mescroll.js 開發的用於 uni-app 的模塊化下拉刷新和上拉載入組件庫。該組件庫封裝了常見的下拉刷新和上拉載入操作，使用方便。

使用以下命令在 uni-app 項目中安裝 Mescroll-uni：

npm install mescroll-uni -S

2. 引入 Mescroll-uni 組件庫

在需要實現無限滾動列表載入更多數據的頁面中，使用 import 語句引入 Mescroll-uni 組件庫。如下所示：

<template>
  <view>
    <mescroll-uni :options="options">
      <view v-for="(item, index) in dataList" :key="index">
        <!-- 列表內容 -->
      </view>
    </mescroll-uni>
  </view>
</template>

<script>
import MescrollUni from 'mescroll-uni';

export default {
  data() {
    return {
      options: {
        // 下拉刷新功能 
        down: {
          isLock: true, //默認禁止下拉刷新操作
        },
        // 上拉載入更多功能
        up: {
          callback: this.loadMoreData,
          isAuto: true, //默認滾動到底部自動載入下一頁
          isLock: false, //默認不禁止上拉載入更多操作
        },
      },
      dataList: [] //數據數組
    }
  },
  components: {
    MescrollUni
  },
  methods: {
    //載入更多數據
    loadMoreData(page){
      //獲取下一頁數據
      //將新數據追加到 dataList 中
    }
  }
}
</script>

3. 實現 loadMoreData 方法

在 loadMoreData 方法中實現載入更多的功能。每次獲取下一頁數據後，將新數據追加到 dataList 中即可。

methods: {
  //載入更多數據
  loadMoreData(page){
    //獲取下一頁數據
    getData(page).then(res => {
      this.dataList.push(...res.data);
      //告訴 Mescroll-uni 組件，數據已載入完成
      this.$nextTick(() => {
        this.$refs.mescroll.endByPage(res.pageSize, res.totalSize); 
      });
    }).catch(() => {
      //告訴 Mescroll-uni 組件，數據載入失敗
      this.$refs.mescroll.endErr();
    });
  }
}

4. 設置 Mescroll-uni 組件的配置項

在 options 配置項中設置 Mescroll-uni 組件的屬性。下面是一些常用的配置項說明：

down：下拉刷新配置項。

isLock：是否啟用下拉刷新，默認為 true 禁用。
auto：是否自動執行下拉刷新，默認為 false 手動觸發。
callback：下拉刷新時觸發的回調函數。

up：上拉載入更多配置項。

isLock：是否啟用上拉載入更多，默認為 false。
auto：是否自動執行上拉載入更多，默認為 true。
callback：上拉載入更多時觸發的回調函數。

options: {
  // 下拉刷新功能 
  down: {
    isLock: true, //默認禁止下拉刷新操作
  },
  // 上拉載入更多功能
  up: {
    callback: this.loadMoreData,
    isAuto: true, //默認滾動到底部自動載入下一頁
    isLock: false, //默認不禁止上拉載入更多操作
  },
}

5. 告訴 Mescroll-uni 組件數據已經載入完成

當數據已經成功載入時，需要使用 this.$refs.mescroll.endByPage 方法告訴 Mescroll-uni 組件，數據已經載入完成。否則，組件將一直顯示正在載入的狀態，導致用戶體驗差。

//告訴 Mescroll-uni 組件，數據已載入完成
this.$refs.mescroll.endByPage(res.pageSize, res.totalSize);

三、如何優化無限滾動列表載入更多數據功能？

1. 載入動畫的優化

如果數據載入較慢，可以在數據請求時顯示載入動畫，增加用戶等待的友好性。可以使用 uni-app 中的 uni.showLoading 方法顯示載入動畫，數據載入完成後調用 uni.hideLoading 方法隱藏載入動畫。

methods: {
  //載入更多數據
  loadMoreData(page){
    //顯示載入動畫
    uni.showLoading({title: '載入中...'});
    //獲取下一頁數據
    getData(page).then(res => {
      this.dataList.push(...res.data);
      //告訴 Mescroll-uni 組件，數據已載入完成
      this.$nextTick(() => {
        this.$refs.mescroll.endByPage(res.pageSize, res.totalSize); 
        //隱藏載入動畫
        uni.hideLoading();
      });
    }).catch(() => {
      //告訴 Mescroll-uni 組件，數據載入失敗
      this.$refs.mescroll.endErr();
      //隱藏載入動畫
      uni.hideLoading();
    });
  }
}

2. 增加數據緩存

如果每次刷新頁面，都需要重新請求數據，會導致網路流量浪費，網路傳輸時間延長。可以考慮增加數據緩存，將之前載入的數據進行緩存，下次進入頁面時直接從緩存中獲取數據。

methods: {
  //載入更多數據
  loadMoreData(page){
    //從緩存中獲取數據
    let cacheData = getCacheData(page);
    if (cacheData) {
      this.dataList.push(...cacheData);
      //告訴 Mescroll-uni 組件，數據已載入完成
      this.$refs.mescroll.endByPage(cacheData.pageSize, cacheData.totalSize); 
    } else {
      //顯示載入動畫
      uni.showLoading({title: '載入中...'});
      //獲取下一頁數據
      getData(page).then(res => {
        this.dataList.push(...res.data);
        //告訴 Mescroll-uni 組件，數據已載入完成
        this.$nextTick(() => {
          this.$refs.mescroll.endByPage(res.pageSize, res.totalSize); 
          //隱藏載入動畫
          uni.hideLoading();
          //緩存數據
          setCacheData(page, res);
        });
      }).catch(() => {
        //告訴 Mescroll-uni 組件，數據載入失敗
        this.$refs.mescroll.endErr();
        //隱藏載入動畫
        uni.hideLoading();
      });
    }
  }
}

3. 分頁數據的優化

在數據量較大的情況下，每次請求所有的數據可能會導致網路傳輸時間較長，甚至會出現數據過大無法載入的情況。可以考慮使用分頁技術，每次只請求一頁數據，減小網路傳輸的數據量。

在實現分頁技術時，需要在後端返回數據時，將數據的總頁數和頁碼信息一併返回。然後在前端將頁碼信息傳遞給 loadMoreData 方法，即可實現分頁載入。

//獲取分頁數據
function getData(page) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: 'http://api.xxx.com/getData',
      data: {
        page: page
      },
      success: res => {
        resolve(res.data);
      },
      fail: err => {
        reject(err);
      }
    });
  });
}

四、總結

本文主要介紹了在 UniApp 中如何實現無限滾動列表載入更多數據功能。使用 Mescroll-uni 組件庫，可以快速搭建無限滾動的列表頁，並且通過一些優化方式，可以提升用戶體驗。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/304836.html