uni-app开发popup弹出层的二级嵌套使用和修改popup默认样式
一、popup的使用(可参考uni-app开发文档)<template><view class="content"><button @tap="startOpen">打开弹窗按钮</button></view><!--第一个弹窗--><uni-popup ref="...
·
一、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>
更多推荐


所有评论(0)