当前位置：首页 > VUE

vue实现图库页面

2026-03-08 19:16:53VUE

Vue 实现图库页面

数据准备与结构设计

使用 Vue 的 data 或 setup（Composition API）定义图片数据数组，每张图片包含 id、src、title 等字段。示例数据结构：

data() {
  return {
    images: [
      { id: 1, src: 'path/to/image1.jpg', title: '示例1' },
      { id: 2, src: 'path/to/image2.jpg', title: '示例2' }
    ]
  }
}

图片列表渲染

通过 v-for 循环渲染图片缩略图，使用 <img> 标签绑定 src 和点击事件：

<div class="gallery">
  <div v-for="image in images" :key="image.id" @click="openModal(image)">
    <img :src="image.src" :alt="image.title">
    <p>{{ image.title }}</p>
  </div>
</div>

模态框实现

通过 v-show 或 v-if 控制模态框显示，展示大图及详细信息：

vue实现图库页面

<div class="modal" v-show="selectedImage">
  <img :src="selectedImage.src" :alt="selectedImage.title">
  <button @click="closeModal">关闭</button>
</div>

对应方法：

methods: {
  openModal(image) {
    this.selectedImage = image;
  },
  closeModal() {
    this.selectedImage = null;
  }
}

样式优化

添加 CSS 实现网格布局和过渡动画：

vue实现图库页面

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

懒加载优化

使用 Intersection Observer 或 vue-lazyload 插件实现图片懒加载：

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  loading: 'placeholder-image.jpg'
})

模板中替换 src 为 v-lazy：

<img v-lazy="image.src" :alt="image.title">

分页加载

结合 v-infinite-scroll 或自定义滚动事件实现分页：

loadMore() {
  if (this.isLoading) return;
  this.isLoading = true;
  fetchNextPage().then(newImages => {
    this.images.push(...newImages);
    this.isLoading = false;
  });
}