关于vue中使用swiper4的坑

类似小程序的swiper中的circular、previous-margin、next-margin展示效果，重点在于动态获取参数后必须(!!!)在请求回调里初始化swiper，不然会出现很奇怪的现象

html

<div class="swiper-container">
	<div class="swiper-wrapper" ref="mySwiper">
		<div class="swiper-slide" v-for="(item,index) in myCardList" :key="index">
			<div class="card">
				<div class="img">
					<img :src="item.icon_url" alt=""  mode="aspectFit">
				</div>
				<img src="../images/ic_bj.png" alt="" class="logo" :pictureTxt="item.picture_txt" @click="toDetail(item)">
				<div class="company">{{item.company}} {{item.job}}</div>
				<div class="name">{{item.nick_name}}</div>
				<div class="card_fotter">
					<div>期限：{{item.expire_date}}</div>
					<div>剩余次数：{{item.share_limit}}</div>
				</div>
			</div>
		</div>
	</div>
</div>

css

.content {
	width: 100%;
	min-height: 100vh;
	position: relative;
	.cardBox {
		position: relative;
		height: vw(988);
		.swiper-container {
			width: 100%;
			height: 100%;
			.card {
				position: absolute;
				top: vw(50);
				width: vw(582);
				height: vw(888);
				border-radius: 20px;
				background-color: #FFF;
				box-shadow: 0px 8px 22px 0px rgba(0, 0, 0, 0.09);
				.img {
					width: 100%;
					height: vw(581);
					img {
						width: 100%;
						height: 100%;
						border-top-right-radius: 20px;
						border-top-left-radius: 20px;
					}
				}
				.logo {
					width: vw(58);
					height: vw(58);
					position: absolute;
					top: 30px;
					right: 30px;
				}
				.company,
				.name {
					color: #333;
					font-size: 40px;
					font-weight: 600;
					text-align: center;
					margin-top: vw(48);
				}
				.name {
					font-size: 48px;
					margin-top: vw(30);
				}
				.card_fotter {
					width: 94%;
					margin: 0 3%;
					color: #999;
					font-size: 24px;
					display: flex;
					justify-content: space-between;
					position: absolute;
					bottom: vw(20);
				}
				p {
					margin: 0 auto;
					position: absolute;
					top: vw(352);
					left: 0;
					right: 0;
					color: #ffffff;
					font-family: PingFangSC-Medium, PingFang SC;
					text-align: center;
					font-size: vw(28);
				}
			}
		}
	}
	.fotter {
		width: 84%;
		color: #333;
		margin: 0 8%;
		font-size: 28px;
		font-weight: 600;
		text-align: center;
		position: absolute;
		bottom: vw(40);
		display: flex;
		justify-content: space-around;
		>div {
			width: vw(276);
			height: vw(90);
			color: #FFF;
			font-size: vw(36);
			font-weight: 600;
			text-align: center;
			line-height: vw(90);
			border-radius: vw(49);
		}
		.card_btn {
			background: linear-gradient(90deg, #FA4A54 0%, #FE5C2A 100%);
		}
		.btn {
			background: linear-gradient(135deg, #1063FE 0%, #0F95FB 100%);
		}
	}
	.swiper-slide-prev {
		/* margin-right: vw(0) !important; */
	}
	.swiper-container .swiper-wrapper .swiper-slide {
		width: 80% !important;
		overflow: hidden;
		display: flex;
		align-items: center;
	}
	.swiper-container .swiper-wrapper .swiper-slide .card {
		width: 100%;
		height: vw(888);
		border-radius: vw(20);
	}
	.swiper-container .swiper-wrapper .swiper-slide-prev,
	.swiper-container .swiper-wrapper .swiper-slide-next {
		// 选中左右两边卡片的样式
	}
	.swiper-container .swiper-wrapper .swiper-slide-prev img,
	.swiper-container .swiper-wrapper .swiper-slide-next img {
		width: 100%;
		height: 100%;
	}
}

updatePage() {
	// this指向会改变
    let that = this;
    /* eslint-disable */
    let mySwiper = new Swiper('.swiper-container', {
        observer: true, //修改swiper自己或子元素时，自动初始化swiper 
        observeParents: true, //修改swiper的父元素时，自动初始化swiper 
        direction: 'horizontal', //滑动方向，可设置水平(horizontal)或垂直(vertical)。
        loop: true, // 设置为true 则开启loop模式
        slidesPerView: 'auto', // 设置slider容器能够同时显示的slides数量(carousel模式)。类型：number or auto
        centeredSlides: true, // 设定为true时，active slide会居中，而不是默认状态下的居左。
        spaceBetween: 10, // 在slide之间设置距离（单位px）。
        loopAdditionalSlides: 3, // loop模式下会在slides前后复制若干个slide,，前后复制的个数不会大于原总个数。
        // observer和observeParents并没发现重新渲染页面的效果
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        on: {
          	// slideChangeTransitionStart和slideChangeTransitionEnd并没有发现什么区别  目测都是滑动结束后触发
     		// click方法是在swiper全局注册点击事件
            slideChangeTransitionStart: function () {
                
            },
            slideChangeTransitionEnd: function () {
                that.$nextTick(() => {
                	// 这里是获取当前选择所对应数据的真实索引
                    that.activeIndex = this.realIndex
                })
            },
            click: function (e) {
                that.$nextTick(() => {
                    that.activeIndex = this.realIndex
                })
                let information = JSON.stringify(that.myCardList[that.activeIndex])
                that.$router.push({
                    name: 'xxx',
                    query: {
                        information: information
                    }
                })
            },
        },
    });
},

如若认可，一键三连~ hhh