一、popup的二级嵌套使用(可参考uni-app开发文档,文档中是一级弹窗,多级的话,我是以下案例嵌套形式)
uni-app官网 ----> 组件 -----> popup ---->下载插件包 ---->引入插件

<template>
		<view class="content">
				<button @tap="startOpen">打开弹窗按钮</button>
		</view>
		
		<!--  第一个弹窗  -->	
				<uni-popup ref="popup" type="center" @touchmove.stop.prevent="moveHandle">
					<view class="close_popup" @tap="closePopup">
						关闭弹窗
					</view>	
					<view class="popup_content">
						      第一个弹窗
						<view class="prize_push_box">
							<button class="prize_push_btn btn" @click="prizeGet">立即充值</button>
						</view>
					</view>
				</uni-popup>

		<!--  第二个弹窗  -->	
				<uni-popup ref="popup_place_false" type="center" @touchmove.stop.prevent="moveHandle">
					<view class="close_popup" @tap="closePlaceFalse">
						关闭弹窗
					</view>	
					<view class="popup_content">
						      第二个弹窗
						<view class="prize_push_box">
							<button class="" @click="nextTo">下一步</button>
						</view>
					</view>
				</uni-popup>
				
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	export default {
		data () {
			return {}
		},
		components: {uniPopup},
		methods:{
			//打开第一个弹窗
			openPopup() {
				this.$refs.popup.open();
			},
			closePopup() {
				this.$refs.popup.close();
			},
			//打开第二个弹窗
			openPlaceFalse() {
				this.$refs.popup_place_false.open();
			},
			closePlaceFalse() {
				this.$refs.popup_place_false.close();
			},
			//点打开弹窗按钮,打开弹窗
			startOpen(){
				let vm = this;
				vm.openPopup();
			},
			//去充值,打开下一个弹窗
			prizeGet(){
				let vm = this;
				vm.closePopup();    //关闭第一个弹窗
				vm.openPlaceFalse();   //打开下一个弹窗
			}
	
		}
	}
</script>

<style>

</style>

二、修改默认样式,在App.vue中:

<style>
	/*每个页面公共css */
	@import url("./static/css/public.css");
	/* 修改uniapp默认样式 */
	/* 取消默认白色背景,变透明 */
	.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box{
		background: none!important;
	}
	/* 改变弹窗宽度 */
	.uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box{
		max-width: 100%!important;
		max-height: 100%!important;
	}
	/* 弹窗宽度 */
	.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box{
		width: 100%;
	}
	/* 蒙版透明度 */
	.uni-popup__mask{
		background: rgba(0, 0, 0, 0.5)!important;
	}
</style>

三、解决弹窗蒙版在手机端滑动不会触发下面界面滑动(在微信开发者工具中无效)
在蒙版标签添加 : @touchmove.stop.prevent=“moveHandle”
例如:

<uni-popup ref="popup_place_false" type="center" @touchmove.stop.prevent="moveHandle">
</uni-popup>	
Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐