前言

✨魁首

🔔一个没有天赋的前端程序员👨‍💻 💡博客

🔰关注我

🤖Github |🔑CSDN | 💎掘金 | 📖 知乎 | 💡博客 |

一、弹窗中的 swiper 再次打开后，分页器不见了？

我的插件版本

"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>