需求:
图片列表点击可查看大图,多图可以左右滑动查看,再次点击会到缩略图的功能
思考:
开始考虑使用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=