使用vant的Swipe 轮播van-swipe 和ImagePreview 图片预览van-image-preview 和Lazyload 懒加载 实现点击哪张轮播图,哪张图预览
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>