简单描述：

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.emit("listerSocket",json)，然后采用uni.emit("listerSocket",json)，然后采用uni.on(‘listerSocket’,(res)=>{})来处理结果。

uni-app做app自定义弹窗实现相关推荐

服务器干货分享！做APP服务器怎么选择？
#手机里使用最多的功能就是APP,现在由于智能手机和网络的大势普及,各行各业的APP也应运而生,一个使用流畅,并且稳定的网络就能使一个APP成功一半了,而使用流畅且稳定有90%都是由服务器来决定的. ...
android 8.1 9.0 10.0 默认允许安装第三方app去掉未知来源弹窗直接安装apk
1.概述在10.0的产品开发中,8.0以后对于安装第三方app时需要申请 REQUEST_INSTALL_PACKAGES权限,那么没有申请权限时就会弹出安装未知来源的对话框,而在定制化开发中,有 ...
转：从零开始做app需要做的事情列表
https://qdan.me/list/VaXl7N8emfv1ayWg 从零开始做App的Bootstrap 做一个App,需要很多东西. 不定期更新. 团队工欲善其事,必先利其器. 需求管理 ...
ios签名软件_如何给无法上架App Store的App做ios签名？
苹果给所有人的印象除了价格相对比较昂贵之外,大概就是ios系统生态的封闭性了.众所周知,ios App上架App Store的审核比较严格,这就导致很多App无法通过App Store的审核,而后进行 ...
做App还是微信公众号，你该如何抉择？
我不够聪明,因为我经常出于好奇被自己提出的问题所困扰,于是乎就有些强迫症似的拼命去寻求答案--我只是想说服自己,让自己从困扰的谜团中清醒.坚定方向,进而能从容不迫的走下去... 最近在考虑一个问题:做 ...
除了uni-app可以做app外，flutter更接近原生开发应用
本篇文章,主要分享uni-app外的flutter的使用说明日期:2021年8月17日作者:任聪聪可以做app的非安卓ios原生框架 1.uni-app https://uniapp.dclou ...
很多人花一大笔钱做APP、小程序
很多人花一大笔钱做APP.小程序, 是纯粹为了做这个东西而做这个东西, 也就是说他们只是觉得需要这个东西, 但为什么需要? 如何使它发挥最大的价值? 其实他们心里并没有一个很清晰的概念. 而且事实上A ...
怎么做app图标_App拉新：以老拉新活动怎么做？
虽然利用老用户来拉新用户这种活动方式已经比较老套了,但是这种方式依然可以为App带来很多的流量和用户,并且有概率实现用户裂变式的增长. 以老拉新这种拉新获客模式,主要是源于用户的分享行为,有些App会 ...
h5做app和原生app有什么区别？
H5开发的web APP和原生APP的区别有以下几个方面: 一.开发方面原生App ⊙ 每一种移动操作系统都需要独立的开发项目 ⊙ 每种平台都需要独立的开发语言.Java(Android), Obj ...
Excel用户打死想不到：表格能做APP，WPS用户：金山系出品就是牛
EXCEL能做什么? 看到这个问题,我相信,你肯定会说,EXCEL可以制作表格.数据统计.统计图表.如果资深一点的用户,会一点VBA编程,会用ACCESS软件,那可能就能做更多一些功能,比如做一些简单 ...

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

简单描述：

注意点：

uni-app做app自定义弹窗实现相关推荐

最新文章

热门文章