uni-app 原生子窗体subNVues 弹框设置背景透明 iOS有效 安卓手机无效

uni-app 原生子窗体subNVues 弹框设置背景透明 iOS有效 安卓手机无效

示例代码：

{
    "pages": [ 
        {  
            "path": "pages/index/index",  
            "style": {  
                "navigationBarTitleText": "项目详情",  
                "enablePullDownRefresh": false,  
                "app-plus": {  
                    "bounce": "none",  
                    "subNVues":[{  
                        "id":"bottom_Bar",  
                        "path":"pages/index/subNVue/bottom",  
                        "style":{  
                            "position":"absolute",  
                            "bottom":"0px",  
                            "width":"100%",  
                            "height":"60px"  
                        }  
                    },  
                    {  
                        "id":"order_pop",  
                        "path":"pages/index/subNVue/order",  
                        "type":"popup",  
                        "style":{  
                            "position":"popup",  
                            "margin":"auto",  
                            "background":"transpant",  
                            "width":"80%",  
                            "height":"700upx"  
                        }  
                    },  
                    {  
                        "id":"subcribe_pop",  
                        "path":"pages/index/subNVue/subcribe",  
                        "type":"popup",  
                        "style":{  
                            "position":"popup",  
                            "margin":"auto",  
                            "background":"transpant",  
                            "width":"80%",  
                            "height":"900upx"  
                        }  
                    }]  
                }  
                }  
        }  
    ],  
    "globalStyle": {  
        "navigationBarTextStyle": "black",  
        "navigationBarTitleText": "uni-app",  
        "navigationBarBackgroundColor": "#F8F8F8",  
        "backgroundColor": "#F8F8F8"  
    }  
}

操作步骤：

  • 安卓手机运行无效过

预期结果：

  • 安卓手机和iPhone一样，都是透明的，点击蒙层会关闭弹框

实际结果：

  • 安卓手机无透明效果，点击周边不会关闭弹框

bug描述：

原生子窗体subNVues 设置背景透明，iOS有效，安卓手机无效

原生子窗体subNVues 设置背景透明安卓手机为啥不生效？ iOS有效。。。

附件：


更多关于uni-app 原生子窗体subNVues 弹框设置背景透明 iOS有效 安卓手机无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

你的 “background”:“transpant”,是哪里看来的文档上没有哦！ 详情：https://uniapp.dcloud.io/collocation/pages?id=app-subnvuesstyle 我直接把你的两个"background":"transpant"给删了就正常了。默认就是透明的。

更多关于uni-app 原生子窗体subNVues 弹框设置背景透明 iOS有效 安卓手机无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


因为是要弹框圆角，百度搜索出来的方案，直接把"background":"transpant"删除，就没有圆角了

回复 雨悸: 那你应该直接在报bug的时候说明清楚具体问题。 经检查，天呐亲你写错单词了吧。transparent你写的啥？你写的是：transpant。

回复 DCloud_uniCloud_JSON: 天呐，不好意思。。。。ios是正常的，我就以为写对的呢，没注意单词，看来ios兼容比较好嘛。。。

回复 雨悸: 只能说ios你写的颜色值只要是错误的，系统识别为空就等于透明。这不是什么兼容只是跟你的预期刚好碰到一起了。

“app-plus”: {
“bounce”: “none”,
“subNVues”:[{
“id”:“bottom_Bar”,
“path”:“pages/tabbar/new/projectInfo/projectDetail/subNVue/bottom”,
“style”:{
“position”:“absolute”,
“bottom”:“0px”,
“width”:“100%”,
“height”:“60px”
}
},
{
“id”:“order_pop”,
“path”:“pages/tabbar/new/projectInfo/projectDetail/subNVue/order”,
“type”:“popup”,
“style”:{
“position”:“popup”,
“margin”:“auto”,
“background”:“rgba(0,0,0,0.1)”,
“width”:“80%”,
“height”:“700upx”
}
},
{
“id”:“subcribe_pop”,
“path”:“pages/tabbar/new/projectInfo/projectDetail/subNVue/subcribe”,
“type”:“popup”,
“style”:{
“position”:“popup”,
“margin”:“auto”,
“background”:“rgba(0,0,0,0.1)”,
“width”:“80%”,
“height”:“900upx”
}
}]
} 我把background设为rgba是可以实现透明效果的，但是点击蒙层不能关闭弹框，ios设置为"background":“transparent” 既可以透明又可以点击蒙层关闭的，安卓就不行

我先记录一下这个情况，你直接参考插件：全局弹窗示例 实现你的逻辑吧

请问下你设置的这个height可以吗，为什么我在ios上没效果了

这是一个已知的Android平台与iOS平台在subNVue背景透明处理上的差异问题。在Android平台上，subNVue的透明背景需要额外设置才能生效。

解决方案：

  1. 在subNVue页面的style中添加以下属性：
"background": "rgba(0,0,0,0)",
"backdrop-filter": "blur(0px)"
  1. 对于点击蒙层关闭功能，需要在Android上手动监听点击事件：
const subNVue = uni.getSubNVueById('order_pop');
subNVue.show('popup', 300, () => {
    // 添加点击监听
    subNVue.addEventListener('click', (e) => {
        if(e.target === subNVue) {
            subNVue.hide();
        }
    });
});
回到顶部