1.在隐藏swiper的同时需要销毁Swiper,所以,在定义swiper时必须要给swiper起一个变量名
data() {
return {
serviceSwiper: null,
serviceSwiperStyle: "",
};
},
methods: {
async initPolicy() {
//需要隐藏swiper的条件
if (this.$store.state.areaId != "37") {
//判断swiper是否存在
if (this.serviceSwiper) {
//销毁swiper,但是必须带有false。否则影响后面数据的更新
this.serviceSwiper.destroy(false);
//更新需要更新的数据
this.policyData = [];
//虽然销毁了swiper,但是swiper在元素上添加的属性: transform,transition-duration还存在,需要手动去除。
this.serviceSwiperStyle = "";
}
}
//其他的操作
this.reFresh1 = false;
let res = {
data: [],
};
if (this.$store.state.areaId == "37") {
res = await getPolicy(areaId);
this.reFresh1 = true;
}
if (res.data.length > 0) {
this.policyData = res.data;
if (this.policyData.length > 5) {
this.$nextTick(() => {
//初始化swiper---可以循环轮播
this.serviceSwiper = new Swiper(".serviceSwiper", {
direction: "vertical",
slidesPerView: 5, // 显示的数量
slidesPerGroup: 1,
paginationClickable: true,
loop: true,
autoplay: 5000,
autoplayDisableOnInteraction: false,
preventLinksPropagation: false,
});
});
} else {
this.$nextTick(() => {
//初始化swiper---不可以循环轮播
this.serviceSwiper = new Swiper(".serviceSwiper", {
direction: "vertical",
slidesPerView: 5, // 显示的数量
slidesPerGroup: 1,
loop: false,
});
});
}
} else {
this.policyData = [];
}
},
}
:style="{ transform: serviceSwiperStyle,‘transition-duration’: serviceSwiperStyle, }"并不是写在带有swiper的div上,而是放在不应该出现swiper却出现了swiper的div上面
<div
class="mask"
:style="{
transform: serviceSwiperStyle,
'transition-duration': serviceSwiperStyle,
}"
>
<!--其他内容-->
.......................
</div>
这样就可以了