标题：【码斯阁技术指南】uni-app中店铺商品列表重复加载问题的解决方案

文档摘要：在使用uni-app开发店铺应用时，商品列表的重复加载是一个常见的性能问题。本文提供了一个简短的解决方案，帮助开发者优化商品列表的加载逻辑，避免不必要的重复加载，从而提升用户体验和应用性能。

问题描述：在uni-app开发的店铺应用中，用户在浏览商品列表时，可能会遇到列表数据重复加载的问题。这通常是由于页面刷新或数据请求逻辑不当造成的，导致用户体验下降和服务器资源浪费。

解决方案：

1. 检查页面生命周期：

• 确保在页面的onLoad或onShow生命周期钩子中进行数据请求。
• 避免在onReady或mounted钩子中请求数据，因为这可能会在页面显示动画完成前多次触发。

2. 使用全局变量或状态管理：

• 使用全局变量或状态管理库（如Vuex）来存储商品列表数据。
• 在请求数据前，先检查全局变量或状态管理库中是否已有数据，避免重复请求。

3. 优化数据请求逻辑：

• 实现缓存机制，对已请求过的数据进行缓存。
• 在用户执行特定操作（如下拉刷新）时，才触发新的数据请求。

4. 使用节流或防抖函数：

• 对触发数据请求的操作（如下拉刷新）使用节流或防抖函数，限制请求的频率。

5. 检查数据绑定：

• 确保在Vue组件中正确使用v-if或v-show指令来控制列表的显示和隐藏，避免不必要的渲染。

6. 服务器端控制：

• 在服务器端设置合理的缓存策略，减少不必要的数据传输。

7. 监控和日志：

• 实施监控和日志记录机制，以便及时发现和定位重复加载的问题。

获取商铺商品

getGoodsfunction(){

let that = this;

if(that.loadend)return;

if(that.loading)return;

if(that.goodsLoading)return;

that.goodsLoading=true;

that.loadTitle =

I1 清空商品列表数据

that.goods =[];getstoreGoods(that.id,that.where).then(res =>{that.goodsLoading=false;

let list = res.data.list;

let goodsList = that.$util.splitArray(list,that.goods);let loadend =list.length<that.where.limit;

that.loadend = loadend;

that.loading =false;that,loadTitle =loadend ?'已全部加载’:'加载更多';that.$set(that,'goods',goodsList);that.$set(that.where,"page,that.where.page + 1);}).catch(err =>{

that.loading = false;that.goodsLoading=false;uni.showToast({title: err,

icon:'none