ImagePreview組件調用，images需要傳入圖片數組，當前的需求ImagePreview不需要輪播，只需要顯示點擊的輪播圖的單張圖。
1/main.js文件中，引入和注冊vant
import Vant from "vant";
Vue.use(Vant);
//圖片懶加載配置項
import {
Lazyload
} from "vant";
Vue.use(Lazyload, {
lazyComponent: true,
});
2/ vue文件中，頁面結構
<template>
<div class="detail_contant">
<van-swipe :autoplay='3000' @change="onChangeImg" >
<van-swipe-item v-for="(image, index) in images" :key="index" @click="showImagePreview" >
<img v-lazy="image" alt="圖片未顯示"/>
</van-swipe-item>
</van-swipe>
<van-image-preview
v-model="ImagePreviewShow"
:images="imagesLists"
>
</van-image-preview>
</div>
</template>
<script>
export default {
data(){
return{
images: [
require('@/assets/banner_3@2x.png'),
require('@/assets/banner_4@2x.png'),
require('@/assets/banner_5@2x.png'),
require('@/assets/banner_1@2x.png'),
require('@/assets/banner_2@2x.png'),
],
ImagePreviewShow: false,
index: 0,
imagesLists: [],
imgIndex:0,
}
},
mounted(){
},
methods: {
//得到圖片索引值
onChangeImg(index) {
this.index = index;
},
//顯示預覽圖
showImagePreview(){
this.imgIndex = this.index;
this.ImagePreviewShow = true;
this.imagesLists = this.images.map((item)=>{
return item;
})
this.imagesLists = this.imagesLists.filter((item,index ) =>{
return index == this.imgIndex ;
})
}, }, } </script>
<style lang="scss" scoped>
.detail_contant{
.van-swipe{
width: 100%;
.van-swipe-item {
height: 100%;
color: #fff;
font-size: 20px;
height: 6.16rem;
text-align: center;
vertical-align: middle;
img{
width: 100%;
height: 100%;
}
}
/deep/ .van-swipe__indicators{
bottom:.27rem;
/deep/ .van-swipe__indicator{
width: .25rem;
height:.25rem;
background: #e9e3d8;
opacity: 1;
&:not(:last-child){
margin-right:.26rem;
}
&.van-swipe__indicator--active{
background: #f78927;
opacity: 1;
}
}
}
}
.van-image-preview{
/deep/ .van-image-preview__index{
display: none;
}
}
}
</style>