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/n/304836.html