uniapp 微信小程序购物车列表前端如何做性能优化呢？部分机型数据只到150左右就会出现白屏现象？

Question

uniapp 微信小程序购物车列表前端如何做性能优化呢？部分机型数据只到150左右就会出现白屏现象，购物车跟淘宝的一样，是多店铺多商品。现在没有处理头绪，望得到各位大佬的指点一下，感谢

Answer 1

结合分页加载、虚拟列表和按店铺分组渲染的完整解决方案：

1. 组件模板

<template>
  <scroll-view scroll-y @scrolltolower="loadMore">
    <div v-for="shop in shops" :key="shop.id">
      <div class="shop-header">{{ shop.name }}</div>
      <recycle-view :items="shop.items" :item-size="itemSize" @scrolltolower="() => loadMoreItems(shop.id)">
        <template v-slot="{ item }">
          <div class="item">
            <image :src="item.image" lazy-load />
            <div class="item-info">
              <div class="item-name">{{ item.name }}</div>
              <div class="item-price">{{ item.price }}</div>
            </div>
          </div>
        </template>
      </recycle-view>
    </div>
  </scroll-view>
</template>

2. 组件脚本

export default {
  data() {
    return {
      shops: [],
      page: 1,
      pageSize: 20,
      loading: false,
      itemSize: { width: 375, height: 100 },
    };
  },
  methods: {
    async loadMore() {
      if (this.loading) return;
      this.loading = true;
      const newShops = await this.fetchShops(this.page, this.pageSize);
      this.shops = [...this.shops, ...newShops];
      this.page += 1;
      this.loading = false;
    },
    async fetchShops(page, pageSize) {
      // 模拟 API 请求
      const response = await fetch(`https://api.example.com/shops?page=${page}&pageSize=${pageSize}`);
      const data = await response.json();
      return data.shops.map(shop => ({
        ...shop,
        items: shop.items.slice(0, this.pageSize), // 初始加载部分商品
        page: 1,
        loading: false,
      }));
    },
    async loadMoreItems(shopId) {
      const shop = this.shops.find(s => s.id === shopId);
      if (!shop || shop.loading) return;
      shop.loading = true;
      const newItems = await this.fetchItems(shopId, shop.page, this.pageSize);
      shop.items = [...shop.items, ...newItems];
      shop.page += 1;
      shop.loading = false;
    },
    async fetchItems(shopId, page, pageSize) {
      // 模拟 API 请求
      const response = await fetch(`https://api.example.com/shops/${shopId}/items?page=${page}&pageSize=${pageSize}`);
      const data = await response.json();
      return data.items;
    },
  },
  mounted() {
    this.loadMore();
  },
};

3. 组件样式

.scroll-view {
  height: 100vh;
}
.shop-header {
  font-weight: bold;
  padding: 10px;
  background-color: #f5f5f5;
}
.item {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.item-info {
  margin-left: 10px;
}
.item-name {
  font-size: 16px;
}
.item-price {
  color: #f40;
}

方案说明

• 分页加载：通过 loadMore 方法实现，每次加载一页店铺数据，避免一次性加载大量数据。
• 虚拟列表：使用 recycle-view 组件，只渲染当前可视区域内的商品项，其他部分使用占位符代替。
• 按店铺分组渲染：将商品按店铺分组，每个店铺的数据独立渲染，减少一次性渲染的数据量。