UniApp 如何处理长列表渲染？

在 UniApp 中，长列表渲染是常见的性能优化场景之一。由于移动设备的性能限制，直接渲染大量数据可能会导致页面卡顿甚至崩溃。以下是 UniApp 处理长列表渲染的常用方法：

一、使用 scroll-view 组件

scroll-view 是 UniApp 提供的滚动视图组件，适合处理长列表渲染。

1. 基本用法

• 示例：

  <template>
    <scroll-view scroll-y style="height: 100vh;">
      <view v-for="item in list" :key="item.id" class="item">
        {{ item.name }}
      </view>
    </scroll-view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        list: Array.from({ length: 1000 }, (_, i) => ({ id: i, name: `Item ${i}` }))
      };
    }
  };
  </script>
  
  <style>
  .item {
    padding: 20px;
    border-bottom: 1px solid #eee;
  }
  </style>
  

2. 分页加载

• 通过监听 scrolltolower 事件实现分页加载。
• 示例：

  <template>
    <scroll-view scroll-y style="height: 100vh;" @scrolltolower="loadMore">
      <view v-for="item in list" :key="item.id" class="item">
        {{ item.name }}
      </view>
      <view v-if="loading" class="loading">加载中...</view>
    </scroll-view>
  </template>
  
  <script>
  export default {
    data() {
      return {
        list: [],
        page: 1,
        loading: false
      };
    },
    onLoad() {
      this.loadData();
    },
    methods: {
      loadData() {
        this.loading = true;
        setTimeout(() => {
          const newData = Array.from({ length: 20 }, (_, i) => ({
            id: this.list.length   i,
            name: `Item ${this.list.length   i}`
          }));
          this.list = this.list.concat(newData);
          this.loading = false;
        }, 1000);
      },
      loadMore() {
        if (!this.loading) {
          this.page  ;
          this.loadData();
        }
      }
    }
  };
  </script>
  
  <style>
  .item {
    padding: 20px;
    border-bottom: 1px solid #eee;
  }
  .loading {
    text-align: center;
    padding: 20px;
  }
  </style>
  

二、使用 virtual-list 组件

virtual-list 是一种虚拟列表技术，只渲染可见区域的内容，适合处理超长列表。

1. 安装 virtual-list 插件

• 安装 virtual-list 插件：

  npm install uni-virtual-list
  

2. 使用 virtual-list

• 示例：

  <template>
    <virtual-list :list="list" :item-size="50" :height="500">
      <template v-slot:default="{ item }">
        <view class="item">
          {{ item.name }}
        </view>
      </template>
    </virtual-list>
  </template>
  
  <script>
  import VirtualList from 'uni-virtual-list';
  
  export default {
    components: { VirtualList },
    data() {
      return {
        list: Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `Item ${i}` }))
      };
    }
  };
  </script>
  
  <style>
  .item {
    padding: 20px;
    border-bottom: 1px solid #eee;
  }
  </style>
  

三、使用 recycle-list 组件

recycle-list 是 UniApp 提供的回收列表组件，适合处理超长列表。

1. 基本用法

• 示例：

  <template>
    <recycle-list :list="list" :item-size="50" :height="500">
      <template v-slot:default="{ item }">
        <view class="item">
          {{ item.name }}
        </view>
      </template>
    </recycle-list>
  </template>
  
  <script>
  export default {
    data() {
      return {
        list: Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `Item ${i}` }))
      };
    }
  };
  </script>
  
  <style>
  .item {
    padding: 20px;
    border-bottom: 1px solid #eee;
  }
  </style>
  

四、总结

UniApp 处理长列表渲染的步骤如下：

1. 使用 scroll-view 组件：通过 scroll-view 实现基本的长列表渲染和分页加载。
2. 使用 virtual-list 组件：通过虚拟列表技术优化超长列表的渲染性能。
3. 使用 recycle-list 组件：通过回收列表组件优化超长列表的渲染性能。

以下是一个完整的 scroll-view 分页加载示例：

<template>
  <scroll-view scroll-y style="height: 100vh;" @scrolltolower="loadMore">
    <view v-for="item in list" :key="item.id" class="item">
      {{ item.name }}
    </view>
    <view v-if="loading" class="loading">加载中...</view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      page: 1,
      loading: false
    };
  },
  onLoad() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.loading = true;
      setTimeout(() => {
        const newData = Array.from({ length: 20 }, (_, i) => ({
          id: this.list.length   i,
          name: `Item ${this.list.length   i}`
        }));
        this.list = this.list.concat(newData);
        this.loading = false;
      }, 1000);
    },
    loadMore() {
      if (!this.loading) {
        this.page  ;
        this.loadData();
      }
    }
  }
};
</script>

<style>
.item {
  padding: 20px;
  border-bottom: 1px solid #eee;
}
.loading {
  text-align: center;
  padding: 20px;
}
</style>

通过合理使用这些方法，可以轻松实现 UniApp 中的长列表渲染功能，提升应用性能。