vue实现图片显示更多

实现图片显示更多功能

在Vue中实现图片显示更多功能，可以通过动态加载或懒加载的方式处理大量图片，避免一次性渲染所有图片导致性能问题。

基础实现方法

创建一个组件，使用v-for循环渲染图片列表，通过变量控制显示数量

<template>
  <div>
    <div v-for="(img, index) in visibleImages" :key="index">
      <img :src="img.url" alt="图片">
    </div>
    <button @click="showMore" v-if="hasMore">显示更多</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allImages: [], // 所有图片数据
      visibleCount: 6, // 初始显示数量
    }
  },
  computed: {
    visibleImages() {
      return this.allImages.slice(0, this.visibleCount)
    },
    hasMore() {
      return this.visibleCount < this.allImages.length
    }
  },
  methods: {
    showMore() {
      this.visibleCount += 6 // 每次增加6张
    }
  }
}
</script>

使用懒加载优化性能

结合Intersection Observer API实现图片懒加载，当用户滚动到页面底部时自动加载更多图片。

<template>
  <div>
    <div v-for="(img, index) in images" :key="index">
      <img :src="img.url" v-if="index < loadedCount" alt="图片">
    </div>
    <div ref="loader" class="loader"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [],
      loadedCount: 12,
      observer: null
    }
  },
  mounted() {
    this.initObserver()
  },
  methods: {
    initObserver() {
      this.observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting) {
          this.loadMore()
        }
      })
      this.observer.observe(this.$refs.loader)
    },
    loadMore() {
      if (this.loadedCount < this.images.length) {
        this.loadedCount += 12
      }
    }
  },
  beforeDestroy() {
    this.observer.disconnect()
  }
}
</script>

<style>
.loader {
  height: 20px;
}
</style>

结合第三方库实现

使用vue-lazyload库可以更方便地实现图片懒加载和显示更多功能。

安装依赖：

npm install vue-lazyload

实现代码：

<template>
  <div>
    <img 
      v-for="(img, index) in visibleImages"
      :key="index"
      v-lazy="img.url"
      alt="图片"
    >
    <button @click="loadMore" v-if="hasMore">加载更多</button>
  </div>
</template>

<script>
import VueLazyload from 'vue-lazyload'

export default {
  data() {
    return {
      allImages: [],
      visibleCount: 12
    }
  },
  computed: {
    visibleImages() {
      return this.allImages.slice(0, this.visibleCount)
    },
    hasMore() {
      return this.visibleCount < this.allImages.length
    }
  },
  methods: {
    loadMore() {
      this.visibleCount += 12
    }
  },
  created() {
    Vue.use(VueLazyload, {
      preLoad: 1.3,
      loading: 'placeholder.jpg',
      attempt: 3
    })
  }
}
</script>

分页加载实现

对于大量图片数据，可以采用分页加载的方式，从服务器按需获取图片。

<template>
  <div>
    <img v-for="(img, index) in images" :key="index" :src="img.url">
    <button @click="fetchMore" v-if="hasMore">加载更多</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [],
      page: 1,
      pageSize: 12,
      total: 0
    }
  },
  computed: {
    hasMore() {
      return this.images.length < this.total
    }
  },
  methods: {
    async fetchImages() {
      const res = await api.getImages({
        page: this.page,
        size: this.pageSize
      })
      this.images = [...this.images, ...res.data.list]
      this.total = res.data.total
    },
    fetchMore() {
      this.page++
      this.fetchImages()
    }
  },
  created() {
    this.fetchImages()
  }
}
</script>

这些方法可以根据实际需求选择或组合使用，实现图片的显示更多功能，同时优化页面性能。