uniapp实现懒加载

uniapp实现懒加载的方法

图片懒加载 在uniapp中，可以使用<image>标签的lazy-load属性实现图片懒加载。该属性仅在page为scroll-view时生效，且需要设置scroll-view的高度。

<scroll-view scroll-y style="height: 100vh;">
  <image 
    v-for="(item, index) in list" 
    :key="index" 
    :src="item.src" 
    lazy-load
    mode="aspectFill"
  ></image>
</scroll-view>

列表数据懒加载 对于长列表数据的懒加载，可以通过监听scroll-view的@scrolltolower事件或页面的onReachBottom生命周期实现。

export default {
  data() {
    return {
      list: [],
      page: 1,
      loading: false,
      noMore: false
    }
  },
  methods: {
    loadMore() {
      if (this.loading || this.noMore) return;
      this.loading = true;

      // 模拟异步请求
      setTimeout(() => {
        const newData = Array(10).fill(0).map((_,i) => ({ 
          id: this.list.length + i,
          src: `https://picsum.photos/200/300?random=${this.list.length + i}`
        }));

        this.list = [...this.list, ...newData];
        this.page++;
        this.loading = false;

        // 假设总共30条数据
        if (this.list.length >= 30) {
          this.noMore = true;
        }
      }, 1000);
    }
  },
  onReachBottom() {
    this.loadMore();
  }
}

组件懒加载 使用vue的异步组件配合uniapp的easycom机制可以实现组件懒加载。

在pages.json中配置：

{
  "easycom": {
    "^lazy-(.*)": "@/components/lazy/$1.vue"
  }
}

创建异步组件：

// components/lazy/my-component.vue
export default {
  name: 'lazy-my-component',
  // 组件实现
}

使用时直接按需引入：

<template>
  <lazy-my-component v-if="showComponent" />
</template>

注意事项

• 图片懒加载需要真机调试，部分模拟器可能无法正常显示效果
• 列表懒加载应配合加载状态提示和没有更多数据提示
• 组件懒加载适用于较大且不立即需要的组件
• iOS平台需要确保scroll-view有明确的高度值

通过以上方法可以有效减少首屏加载时间，提升用户体验。根据实际需求选择适合的懒加载方案，也可以组合使用多种方式。