uni-app做app自定义弹窗实现

简单描述：

uni.showModel的阴影背景不能遮挡导航栏，弹窗效果不是很完美。要求弹出弹框时，将整个页面都覆盖在阴影层下。

个人用的ui组件uView，具体方案也是采用uView的压窗屏，其思路和方案可以参考官方文档

不过个人在此上踩了不少坑，主要是弹框的背景是白色，没有透明，在此做个记录。

---

1、创建一个弹窗页面，

<template>
	<u-modal v-model="show" :show-cancel-button="showCancelButton" confirm-text="升级" title="发现新版本" @cancel="cancel" @confirm="confirm">
		<view class="u-update-content">
			<rich-text :nodes="content"></rich-text>
		</view>
	</u-modal>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				content:'',
				showCancelButton:false
			}
		},
		onLoad(data) {
			this.content = data.content 
			this.showCancelButton = data.showCancelButton
		},
		onReady() {
			this.show = true;
		},
		methods: {
			cancel() {
				this.closeModal();
			},
			confirm() {
				//要执行的业务代码
				
				this.closeModal();
			},
			closeModal() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: transparent;
	}
	
	.u-full-content {
		background-color: #00C777;
	}
	
	.u-update-content {
		font-size: 26rpx;
		color: $u-content-color;
		line-height: 1.7;
		padding: 30rpx;
	}
</style>

---

2、pages.json添加注册刚刚新建的弹窗页面

{
            "path" : "mycomponents/screen/version",
            "style" :                                                                                    
            {
                "navigationStyle": "custom",
				"backgroundColor": "transparent",
				"app-plus": {
					"animationType": "fade-in",
					"background": "transparent",
					"popGesture": "none",
					"backgroundColor": "rgba(0,0,0,0)", // 背景透明
					"webviewBGTransparent":true,
					"mask":"none"
				}
            }
        }

3、在需要使用的地方，不管在vue页面，或是在js里面，通过如下跳转到弹窗页面，其本质是跳转页面，但看起来像弹窗，打开页面同时显示u-model

	uni.navigateTo({
		url:'/mycomponents/screen/version?content=有新的版本&showCancelButton=true'
		})

---

到这里基本上可以实现弹窗的效果，为了必坑，下面说下个人遇到的问题：

---

注意点：

1、试了几个手机，弹窗效果都是白底，不具备透明效果，可以在ap-plus添加透明属性"opacity":0.9，但这样整个页面都显得透明，不能我想要的效果。
2、在弹窗页面加上，
page {
background: transparent;
}
这样就能够实现之前说的透明效果了，但这里注意，一定要去掉 scoped，要不然还是不行的
3、至于点击确定如何传递参数信息，可以采用uni.$emit("listerSocket",json)，然后采用uni.$on(‘listerSocket’,(res)=>{})来处理结果。