当前位置：首页 > VUE

vue实现伪加载列表

2026-01-23 13:39:10VUE

Vue 实现伪加载列表

在 Vue 中实现伪加载列表（即模拟数据加载的列表）可以通过以下方法完成。伪加载通常用于展示加载动画或占位内容，提升用户体验。

使用 v-for 和条件渲染

通过 v-for 渲染列表数据，结合 v-if 或 v-show 控制加载状态的显示。

<template>
  <div>
    <div v-if="loading" class="loading-placeholder">
      <!-- 加载占位符 -->
      <div v-for="i in 5" :key="i" class="placeholder-item"></div>
    </div>
    <ul v-else>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      list: []
    };
  },
  mounted() {
    // 模拟异步加载
    setTimeout(() => {
      this.list = [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ];
      this.loading = false;
    }, 2000);
  }
};
</script>

<style>
.loading-placeholder {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.placeholder-item {
  height: 50px;
  background: #f0f0f0;
  border-radius: 4px;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}
</style>

使用骨架屏（Skeleton Loading）

骨架屏是一种更优雅的伪加载方式，通过预定义的占位样式模拟内容结构。

<template>
  <div>
    <div v-if="loading" class="skeleton-container">
      <div class="skeleton-item" v-for="i in 3" :key="i"></div>
    </div>
    <div v-else>
      <div v-for="item in list" :key="item.id" class="content-item">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      list: []
    };
  },
  mounted() {
    setTimeout(() => {
      this.list = [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ];
      this.loading = false;
    }, 1500);
  }
};
</script>

<style>
.skeleton-container {
  width: 100%;
}

.skeleton-item {
  height: 60px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  margin-bottom: 10px;
  border-radius: 4px;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

.content-item {
  padding: 15px;
  border: 1px solid #eee;
  margin-bottom: 10px;
}
</style>

使用第三方库

若需更复杂的伪加载效果，可以使用第三方库如 vue-content-loader。

安装：

npm install vue-content-loader

示例：

vue实现伪加载列表

<template>
  <div>
    <content-loader v-if="loading" :speed="2" primaryColor="#f3f3f3" secondaryColor="#ecebeb">
      <rect x="0" y="0" rx="3" ry="3" width="100%" height="20" />
      <rect x="0" y="30" rx="3" ry="3" width="80%" height="20" />
      <rect x="0" y="60" rx="3" ry="3" width="60%" height="20" />
    </content-loader>
    <div v-else>
      <div v-for="item in list" :key="item.id">{{ item.name }}</div>
    </div>
  </div>
</template>

<script>
import { ContentLoader } from 'vue-content-loader';

export default {
  components: { ContentLoader },
  data() {
    return {
      loading: true,
      list: []
    };
  },
  mounted() {
    setTimeout(() => {
      this.list = [
        { id: 1, name: 'Loaded Item 1' },
        { id: 2, name: 'Loaded Item 2' }
      ];
      this.loading = false;
    }, 2000);
  }
};
</script>