Uni-app 列表缓存：兼容 H5 和 App 端

在开发跨平台的移动应用时，性能优化和用户体验是至关重要的。对于基于 Uni-app 的项目，尤其是在 H5 和 App 端的开发中，列表缓存技术可以显著提升应用的响应速度和用户体验。本文将详细介绍如何在 Uni-app 中实现列表缓存，同时兼容 H5 和 App 端。

一、为什么需要列表缓存？

在开发列表页面时，尤其是在数据量较大的情况下，频繁地请求数据会导致页面加载缓慢，影响用户体验。通过缓存机制，可以在本地存储已加载的数据，减少不必要的网络请求，从而提升页面的加载速度和响应能力。

此外，列表缓存还可以实现以下功能：

1. 快速恢复页面状态：用户离开页面后再返回时，页面可以快速恢复到之前的状态，包括滚动位置和已加载的数据。

2. 减少服务器压力：通过缓存数据，减少了对服务器的请求次数，降低了服务器的负载。

3. 离线访问：用户可以在离线状态下访问已缓存的数据，提升应用的可用性。

二、Uni-app 列表缓存的实现

1. 数据缓存

在 Uni-app 中，可以使用 uni.setStorageSync 和 uni.getStorageSync 方法来实现本地缓存。以下是实现列表数据缓存的代码示例：

// 缓存数据
uni.setStorageSync("homeData", {
  dataList: this.dataList, //数据集合
  page: this.page,  //分页
  pageSize: this.pageSize, //页码
  allTotal: this.allTotal, //总数
  status: this.status,  //uni-load-more的status状态
});

// 获取缓存数据
const homeData = uni.getStorageSync("homeData");
if (homeData) {
  this.dataList= homeData.dataList;
  this.page = homeData.page;
  this.pageSize = homeData.pageSize;
  this.allTotal = homeData.allTotal;
  this.status = homeData.status;
} else {
  this.loadMoreData(); // 如果没有缓存数据，则加载数据
}

2. 滚动位置缓存

除了缓存数据外，还可以缓存页面的滚动位置。这样，用户在离开页面后再返回时，页面可以恢复到之前的滚动位置，提升用户体验。

// 保存滚动位置
saveScrollPosition() {
  uni.setStorageSync("scrollTop", this.scrollTop);
},

// 恢复滚动位置
restoreScrollPosition() {
  this.scrollTop = uni.getStorageSync("scrollTop") || 0;
  if (this.scrollTop > 0) {
    setTimeout(() => {
      uni.pageScrollTo({
        scrollTop: this.scrollTop,
        duration: 0,
      });
    }, 100); // 稍微延迟一下，确保页面渲染完成
  }
},

//这个在methods同级
 onPageScroll(res) {
    this.scrollTop = res.scrollTop
}

3. 兼容 H5 和 App 端

在 安卓平台运行时，onLoad和onShow生命周期表现一致，即每次页面显示都会执行。所以，通过条件编译实现 H5 和 App 端的兼容。可以在 H5 端直接加载数据，而在 App 端优先使用缓存数据。

onLoad() {
  // #ifdef H5
  this.loadMoreData();
  // #endif
  // #ifdef APP-PLUS
  const homeData = uni.getStorageSync("homeData");
  if (homeData) {
    this.dataList= homeData.dataList;
    this.page = homeData.page;
    this.pageSize = homeData.pageSize;
    this.allTotal = homeData.allTotal;
    this.status = homeData.status;
  } else {
    this.loadMoreData();
  }
  //#endif
},

4. 其他

// 进入详情时，存储homeData

//保存scrollTop
  onHide() {
    this.saveScrollPosition();
  },

//回显scrollTop
  onShow() {
    this.restoreScrollPosition();
  },

//在app.vue 中清除homeData的缓存
  onLaunch() {
    uni.removeStorageSync('homeData');
  },

三、总结

通过上述实现，我们可以在 Uni-app 中实现列表缓存，同时兼容 H5 和 App 端。这种缓存机制不仅可以提升应用的性能和用户体验，还可以减少服务器的压力。希望本文的介绍对你的项目有所帮助！