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/[email protected]'), require('@/assets/[email protected]'), require('@/assets/[email protected]'), require('@/assets/[email protected]'), require('@/assets/[email protected]'), ], ImagePreviewShow: false, index: 0, imagesLists: [], imgIndex:0, } }, mounted(){ }, methods: { //得到图片索引值 onChangeImg(index) { this.index = index; }, //显示预览图 showImagePreview(){ this.imgIndex = this.index; this.ImagePreviewShow = true; this.imagesLists = [ require('@/assets/[email protected]'), require('@/assets/[email protected]'), require('@/assets/[email protected]'), require('@/assets/[email protected]'), require('@/assets/[email protected]'), ]; 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>