一、轮播图中由于默认自动复制增加了一张图，所有在做轮播图的点击事件时不能简单的用官方文档，应使用computed方法来定义。
<swiper class="home_swiper" ref="mySwiper" :options="swiperOption_" v-if="pictures.length"></swiper>
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
},
swiperOption_() {
let that = this
let option = {
preventClicksPropagation: false, //拖动Swiper时阻止click事件
autoplay: {
disableOnInteraction: false, // 用户操作后是否禁止自动循环
delay: 3000 // 自自动循环时间
}, // 可选选项，自动滑动
loop: true,
spaceBetween: 0,
longSwipesRatio : 0.1,
centeredSlides: true,
observer: true, // 修改swiper自己或子元素时，自动初始化swiper
observeParents: true, // 修改swiper的父元素时，自动初始化swiper
pagination: {
el: ".swiper-pagination",
type: "bullets"
},
on: {
click: function() {
const realIndex = this.realIndex;
console.log(realIndex)
that.to_page(realIndex, 0)
},
},
}
return option
}
},
methods：{
to_page(url, e) {}
}
注意： 一定要这玩意 let that = this 不然拿到不这to_page方法
二、如果是简单的使用那就在data中定义就好了
<swiper class="swiper-wrapper enlargement_img" :options="swiperOption_"></swiperSlide>
data() {
swiperOption: {
zoom: true,
initialSlid: 0,
longSwipesRatio: 0.1,
preventClicksPropagation: false,
pagination: {
el: ".swiper-pagination",
type: "fraction"
},
},
}
三、注意点
动态更新数据时，初始化一定要用
v-if不能用v-show，原因请自己看vue的官网，比如
v-if="pictures.length"。