思路:
- vant中提供函数 ImagePreview
- 给原每一个图片子元素设置点击事件,api中提供 initial-swipe 索引,拿到原图索引
- 设置change事件,保存大图切换的对应索引给到自己的 initial-swipe索引中
- 设置图片预览切换时,根据切换后的索引,设置原图的位置,大图原图同步
- 原图片 swipeTo(i) 切换到指定位置,
代码:
<!-- 轮播图 -->
<van-swipe
class="my-swipe"
:autoplay="3000"
indicator-color="white"
:initial-swipe="index" //自己定义的index值
@change="onChange"
ref="mySwipe"
>
<van-swipe-item
v-for="item in imgList"
:key="item"
@click="onImgPreView"
>
<van-image
width="100vw"
height="3rem"
fit="contain"
:src="item" />
</van-swipe-item>
</van-swipe>
放大图片
// 放大图片
onImgPreView() {
// 点击轮播图时,通过数据拿到当前索引,根据当前索引创建图片预览,设置默认图片
const that = this;
ImagePreview({
images: this.imgList, //点击后的图片。
startPosition: this.index, //index默认为0,提供的起始位置
onChange(i) {
// 当图片预览切换时,根据切换后的索引,设置轮播图的位置
that.$refs.mySwipe.swipeTo(i);
},
});
},
onChange(index) { //vant提供的索引值
// 在轮播图切换时,将索引保存到数据中
this.index = index;
},
标签:index,vue,轮播,vant,索引,切换,图片 From: https://www.cnblogs.com/DTCLOUD/p/17346297.html