uniapp 实现弹窗异型自定义swiper 动态修改current值改变展示首图

效果展示

swiper代码

//zPopup 为弹窗组件
<zPopup v-model="applyPopup" type="2000">
			<view class="banner_swiper_box">
				<swiper class="banner_swiper" :autoplay="false" :interval="3000" previous-margin="40px" next-margin="40px"
				 :duration="1000" @change="onSwiperChange" :current="swiperIndex">
					<swiper-item>
						<view class="banner_img" :class="{ active: swiperIndex == 0 }">
							<view class="primary">
								<image src="../../static/icon/shengBa/ic_chuji_a.png" mode="aspectFill"></image>
							</view>
							<view class="price_box">
								￥<text>2818</text>
							</view>
							<view class="tips ">(赠送等值积分抵现使用）招商补贴：10-20%</view>
							<view class="word">即买即得</view>
							<view class="word">价值<text>78158</text>元大礼包</view>
							<image class="gift" src="../../static/icon/shengBa/ic_chuji.png" mode="aspectFill"></image>
							<text class="mention">购买资格 一经售岀 概不退款</text>
							<button class="buy">购买初级会员礼包</button>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="banner_img" :class="{ active: swiperIndex == 1 }">
							<view class="primary">
								<image src="../../static/icon/shengBa/ic_gaoji_a.png" mode="aspectFill"></image>
							</view>
							<view class="price_box">
								￥<text>7878</text>
							</view>
							<view class="tips yellow">(赠送等值积分抵现使用）招商补贴：15-25%</view>
							<view class="word gold">即买即得</view>
							<view class="word gold">价值<text>121008</text>元大礼包</view>
							<image class="gift" src="../../static/icon/shengBa/ic_gaoji.png" mode="aspectFill"></image>
							<text class="mention">购买资格 一经售岀 概不退款</text>
							<button class="buy active">购买高级会员礼包</button>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="swiper_pages">
				<view class="pages" :class="{ active: swiperIndex == 0 }"></view>
				<view class="pages" :class="{ active: swiperIndex == 1 }"></view>
			</view>
			<view class="close" @click="applyPopup = false">
				<image src="../../static/icon/shengBa/ic_guanbi.png" mode=""></image>
			</view>
		</zPopup>

css代码（scss）

	.banner_swiper_box {
		width: 100vw;
		position: relative;

		.banner_swiper {
			height: 850rpx;

			swiper-item {
				position: relative;
				box-sizing: border-box;
				display: flex;
				align-items: flex-end;

				.banner_img {
					position: relative;
					border-radius: 20rpx;
					width: 590rpx;
					//height: 790rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					transform: scale(0.9);
					transition: all 0.4s;
					background-color: #fff;
					padding: 80rpx 40rpx 40rpx 40rpx;

					&.active {
						transform: scale(1);
					}

					.price_box {
						font-size: 24rpx;
						color: #ff3e3e;

						text {
							font-size: 48rpx;
						}
					}

					.tips {
						font-size: 24rpx;
						color: #999999;
					}

					.yellow {
						color: #cca56b;
					}

					.word {
						font-family: PangMenZhengDao;
						font-size: 36rpx;
						color: #333333;

						text {
							font-size: 48rpx;
							color: #ff3e3e;
						}

						&:nth-child(4) {
							margin-top: 40rpx;
						}
					}

					.gold {
						color: #8e611f;
					}

					.gift {
						width: 355rpx;
						height: 273rpx;
					}

					.mention {
						margin-top: 24rpx;
						font-size: 24rpx;
						color: #ff3e3e;
					}

					.buy {
						width: 100%;
						margin-top: 24rpx;
						@include theme('gradient_bg');
						height: 88rpx;
						border-radius: 44rpx;
						line-height: 88rpx;
						font-size: 32rpx;
						color: #fff;
					}

					.active {
						background-image: linear-gradient(270deg,
							#d1ba77 0%,
							#f7e8ad 100%) !important;
					}

					.primary {
						z-index: 20;
						position: absolute;
						top: -74rpx;
						left: 50%;
						transform: translateX(-50%);

						image {
							width: 477rpx;
							height: 153rpx;

						}
					}
				}
			}
		}
	}

组件import并注册（局部代码）

import zPopup from '@/components/common/popup.vue';
components: {
			zPopup
		}

弹窗组件popup.vue代码

<template>
	<view @touchmove="onTouchMove">
		<!-- 遮罩层动画 -->
		<view class="mask" @click="hideOnBlur && (currentValue = false)" v-if="currentValue"></view>
		<!-- 显示信息层 -->
		<view class="popup_box" :class="{'bottom': type == 1000 ,'center':type == 2000}" :style="{opacity:opacity,transform:transform}">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//是否显示
			value: {
				type: Boolean,
				default: function() {
					return false;
				}
			},
			//点击遮罩层关闭弹窗
			hideOnBlur: {
				type: Boolean,
				default: function() {
					return true;
				}
			},
			//禁止页面滚动（H5生效）
			scroll: {
				type: Boolean,
				default: true
			},
			// 类型
			//  1000 靠下
			//  2000 居中
			type: {
				type: String,
				default: function() {
					return "1000";
				}
			}
		},
		created() {
			if (typeof this.value !== "undefined") {
				this.currentValue = this.value;
				this.setAnimation(this.value);
			}
		},
		watch: {
			value(val) {
				this.currentValue = val;
				this.setAnimation(val);
			},
			currentValue(val) {
				this.$emit("change", val);
				this.$emit("input", val);
			}
		},
		data() {
			return {
				// 传进来的值
				currentValue: false,
				opacity: 0,
				transform: ""
			};
		},
		methods: {
			onTouchMove: function(event) {
				!this.scroll && event.preventDefault();
			},
			setAnimation(val) {
				if (this.type == 1000) {
					if (val) {
						this.transform = "translateX(0%) translateY(0%)";
						this.opacity = 1;
					} else {
						this.opacity = 0;
						this.transform = "translateX(0%) translateY(100%)";
					}
				} else if (this.type == 2000) {
					if (val) {
						this.opacity = 1;
						this.transform = "translateX(-50%) translateY(-50%) scale(1)";
					} else {
						this.opacity = 0;
						this.transform = "translateX(-50%) translateY(-50%) scale(0)";
					}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	/*遮罩层*/
	.mask {
		position: fixed;
		z-index: 500;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		transition: all 0.4s;
	}

	.popup_box {
		position: fixed;
		max-width: 100%;
		max-height: 100%;
		min-height: 50upx;
		z-index: 501;
		opacity: 0;
		font-size: 28upx;
		transition: all 0.4s;

		&.bottom {
			left: 0upx;
			/* #ifdef H5 */
			bottom: var(--window-bottom);
			/* #endif */
			/* #ifndef H5 */
			bottom: 0;
			/* #endif */
			min-width: 100%;
			transform: translateX(0%) translateY(100%);
		}

		&.center {
			left: 50%;
			top: 50%;
			transform: translateX(-50%) translateY(-50%);
		}
	}
</style>

data值

data() {
			return {
				//控制弹窗是否出现
				applyPopup: false,
				//控制出现第几个swiper 从0开始
				swiperIndex: 1
			};
		},