// 我的插件版本
"swiper": "5.4.5",
"vue-awesome-swiper": "^4.1.1",问题描述:
第一次打开分页器的时候能正常看到分页器，第二次打开分页器神奇般的不见了，最开始我判断的方向有两个：
①分页器初始化的时候，swiper 在 imgList 还没获取到就提前加载了；
②关闭分页器的时候，swiper 未能完全销毁，重新切换一个tab页或者刷新网页又能出现；
在查阅了很多资料之后，发现以上两个判断都咩有准确的解决方案，干脆一不做二不休，自定义一个分页器；
解决方案：自定义分页器
<!-- mySwiper 自定义弹窗 -->
<template>
<a-modal class="payedOrderModal" :keyboard="false" :maskClosable="true" :footer="null" :destroyOnClose="!0" centered :body-style="{paddingTop:0,paddingBottom:0,height:'500px',minHeight:'500px'}" :width="990" :visible="showFlag" cancelText="取消" @cancel="cancel">
<div slot="title">图片</div>
<swiper class="swiper mySwiper" ref="mySwiper" :autoplay="true" :options="swiperOptions">
<swiper-slide class="swiper-slide" v-for="(item,index) of imgList" :key="index">
<div class="img swiper-zoom-container">
<img :src="item.url || item" alt="">
</div>
</swiper-slide>
<!-- <div class="swiper-pagination" slot="pagination"></div> -->
<div class="swiper-button-prev" slot="button-prev" @click="prev"></div><!-- 左箭头 -->
<div class="swiper-button-next" slot="button-next" @click="next"></div><!-- 右箭头 -->
</swiper>
<!-- 自定义分页器 -->
<div class="swiper-pagination">
<template v-for="(item, index) in imgList" >
<span :class="['swiper-pagination-bullet', currentIndex === index ? bulletActive : '']" :key="index" tabindex="0" role="button" :aria-label="`Go to slide ${index}`" @click="selectPagination(index)"></span>
</template>
</div>
</a-modal>
</template>
<script>
import "swiper/css/swiper.css";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
export default {
name: "MySwiper",
title: "这里是页面或组件名字",
components: {
Swiper,
SwiperSlide
},
props:{
// 当前图片索引
activeIndex:{
type:Number,
default(){
return 0;
}
},
// 所有图片列表
imgList:{
type:Array,
default(){
return [];
}
}
},
data() {
return {
showFlag: true,
currentIndex: null,
bulletActive: "swiper-pagination-bullet-active",
swiperOptions: {
initialSlide:0,
loop: true,
autoplay: false,
zoom: {
minRatio:0.8,
maxRatio:3
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
observer: true,
observeParents: true
}
};
},
created() {
},
mounted() {
this.swiperOptions.initialSlide = this.activeIndex;
this.currentIndex = this.activeIndex;
},
methods: {
onSwiper(swiper) {
console.log(swiper);
},
onSlideChange() {
console.log("slide change");
},
prev(){
let { realIndex } = this.$refs.mySwiper.$swiper;
realIndex = !realIndex ? this.imgList?.length : this.currentIndex;
this.$set(this, "currentIndex", realIndex - 1);
this.$refs.mySwiper.$swiper.slidePrev();
},
next(){
let { realIndex } = this.$refs.mySwiper.$swiper;
realIndex = realIndex === this.imgList?.length - 1 ? -1 : this.currentIndex;
this.$set(this, "currentIndex", realIndex + 1);
this.$refs.mySwiper.$swiper.slideNext();
},
selectPagination(index){
this.currentIndex = index;
this.$refs.mySwiper.$swiper.slideTo(index + 1);
},
cancel(){
this.showFlag = false;
this.$emit("cancel");
}
},
beforeDestroy() {
this.$refs.mySwiper.$swiper.destroy();
}
};
</script>
<style scoped lang="less">
.swiper-slide{
text-align: center;
padding: 10px;
img{
max-width: 100%;
max-height: 60vh;
}
}
.mySwiper{
height: 100%;
/deep/.swiper-wrapper{
height: 100%;
display: flex;
align-items: center;
}
}
.swiper-pagination{
bottom: 10px;
left: 0;
width: 100%;
.swiper-pagination-bullet{
margin: 0 4px;
}
}
</style>