首页 > 其他分享> 文章详细

Vue实现查看大图，多图可滑动查看，再次点击会到缩略图的功能（类似微信朋友圈）

2021-09-15 17:03:15 阅读：313 来源： 互联网

标签：index pagination Vue 查看 imglistshade 朋友圈组件 display swiper

需求：

图片列表点击可查看大图，多图可以左右滑动查看，再次点击会到缩略图的功能

思考：

开始考虑使用v-viewer组件，功能比较多，可以旋转，放大缩小图片等，但是并不完全符合需求，后采用swiper-slide,自己写组件方式完美适配需求。

效果如下：

2.viewimglist组件

单独新建个文件，我这里是建在components文件夹下，命名为viewimglist.vue。你根据自己的文件目录建，能正确引入就行。完整的组件代码如下：

<template>
  <div class="ui-shade imglistshade">
    <div class="imgArr" @click.self="close">
      <swiper :options="swiperOption">
        <swiper-slide v-for="item in imglist" :key="item.id">
          <img :src="item" @click.self="close" />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>
 
<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
export default {
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          clickable: false,
        },
        speed: 500,
      },
    };
  },
  props: {
    imglist: {
      type: Array,
      required: true,
    },
    index: {
      type: Number,
      default: 3,
    },
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  created() {
    this.swiperOption.initialSlide = this.index;
  },
  methods: {
    close() {
      this.$emit("closeMolde", false);
    },
  },
};
</script>
 
<style>
@import "../../../node_modules/swiper/dist/css/swiper.min.css";
.imglistshade img {
  width: 100%;
  display: block;
}

.ui-shade {
  background: rgba(0, 0, 0, 0.9);
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.imgArr {
  /* position: absolute; */
  height: 100vh;
  /* top: 0; */
  width: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
}

.imglistshade .swiper-pagination-bullet-active {
  background: #fff !important;
}

.imglistshade .swiper-pagination.swiper-pagination-bullets {
  position: fixed;
  bottom: 80px;
}

.imglistshade .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
}
.swiper-pagination-bullet{
  background: #999;
}
.imglistshade .swiper-slide {
  display: flex;
  align-items: center;
}

.imglistshade .swiper-container {
  display: flex;
  align-items: center;
}

.imglistshade .swiper-container {
  overflow: visible;
  width: 100%;
}
</style>

3.在需要使用该组件的父页面使用组件

3.1 引入组件

import imglist from "../assets/components/viewimglist.vue";

3.2 注册组件

  components: {
    imglist,
  },

3.3页面使用

<!-- 图片预览 -->
<div  v-for="(item, index) in imgArr"
      :key="index"
      class="img-display">
        <img :src="item"  @click="imgClick(index)" />
 </div>    

<imglist
      v-if="imglistmodalisshow"
      :index="crtIndex"
      :imglist="imgArr"
      @closeMolde="closeMolde"
    ></imglist>

3.4 相关的data

  data() {
    return {
      imglistmodalisshow: false, //弹出显示
      crtIndex: 0, //点击图片下标
      imgArr: [
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      ], // 用于展示的图片数组
    };
  },

3.5 相关methods


    imgClick(index) {
      this.imglistmodalisshow = true;
      this.crtIndex = index;
    },
    closeMolde() {
      this.imglistmodalisshow = false;
    },

标签：index,pagination,Vue,查看,imglistshade,朋友圈,组件,display,swiper
来源： https://blog.csdn.net/weixin_39089928/article/details/120311357

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9