HawkLu92
HawkLu92
  • 发布:2019-11-18 14:48
  • 更新:2021-08-23 14:31
  • 阅读:1960

【报Bug】subNVue,subNVue.setStyle()方法无效以及兼容性问题

分类:uni-app

详细问题描述

原生子窗体subNVue,subNVue.setStyle()方法,设置原生子窗体的样式,在安卓端无效。

重现步骤

[步骤]
APP端,因为页面调用了视屏video组件,需要设置一个透明标题栏,显示在视屏上层,使用subNVue,按照官方文档和方法。

1.新建subNVue页面,页面结构

2.设置pages.json文件

3.在页面中调用subNVue

[结果]
subNVue的确是显示出来了,但是通过setStyle()方法动态修改样式,发现只有背景修改成功,高度设置无效。而且苹果手机默认的subNVue高度为100%,导致页面无法滑动,也无法点击操作下层的视屏。
如下图:最左侧为IOS苹果6,右边为安卓机

[期望]
1.能动态设置subNVue的样式。

  1. ios和安卓样式统一

IDE运行环境说明

[IDE版本号]
HBuilder X 2.4.2.20191115
[windows版本号]
win7 sp1

uni-app运行环境说明

[运行端是h5或app或某个小程序?]
APP

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]
通过HBuilder X创建
[编译模式是老模板模式还是新的自定义组件模式?]
自定义组件模式

App运行环境说明

[Android版本号]
目前公司几台测试机都出现该问题:

小米 MI5 安卓7.0
魅蓝Max 安卓7.0
三星 Galaxy S7 安卓8.0

[ios版本号]
iphone 6 软件版本:12.4.3

附件

[可重现代码片段]
pages.json设置

{  
            "path": "pages/goodDetail/goodDetail",  
            "style": {  
                "app-plus": {  
                    "titleNView": false,  
                    "subNVues": [{  
                        "id": "videoTTbar", // 唯一标识    
                        "path": "pages/goodDetail/subNVues/videoTTbar", // 页面路径    
                        "style": {  
                            "position": "absolute",  
                            "left":"0px",  
                            "right":"0px",  
                            "width": "100%",  
                            "height": "150upx",  
                            "background": "rgba(255,255,255,0.5)",  
                            "z-index":999  
                        }  
                    }]  
                },  
                "navigationStyle": "custom"  
            }  
        }

页面调用

let videoTTbar=uni.getSubNVueById("videoTTbar");  
videoTTbar.setStyle({  
       "background":"#FFAA00",  //橙色  
    "height":uni.getSystemInfoSync().statusBarHeight+uni.upx2px(90)+"px"  
});  

videoTTbar.show();

subNVues页面

<template>  
    <view>  
        <view class="videoTTbar" :style="{'height':ssHh+'px'}">  
            <image class="backImg" src="../../../static/back-white.png"></image>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data(){  
            return {  
                ssHh:uni.getSystemInfoSync().statusBarHeight+uni.upx2px(90)  
            }  
        },  
        onLoad() {  

        }  
    }  
</script>  

<style>  

    .videoTTbar{  
        left: 0;  
        right: 0;  
        position: fixed;  
        height: 90upx;  
        padding: 0 28upx;  
        background-color: #0077AA;  //蓝色头部  
    }  
    .backImg{  
        width: 60upx;  
        height: 60upx;  
        margin-top: 15upx;  
    }  
</style>  

联系方式

[QQ] 2771563102

2019-11-18 14:48 负责人:无 分享
已邀请:
HawkLu92

HawkLu92 (作者) - GoodGoodCoding,DayDayNoBug

是平台bug还是我的代码问题,求平台回复一下啊。。。

  • 1***@qq.com

    我也遇到这个问题了,不知道怎么解决 设置"position": "static" 下有问题

    2020-01-18 18:03

b***@qq.com

b***@qq.com - 96

请问解决了吗。楼主,我也碰到这种问题了

  • HawkLu92 (作者)

    没有,官方都没任何回复。我暂时先把这一块放最后了

    2019-11-25 12:11

9***@qq.com

9***@qq.com - 折柳赠友

老哥有解决办法了没,我现在也是设置背景颜色,高度就不生效,快烦死了 nvue处处是坑

xatao

xatao

你好 你这个问题 当时怎么解决的 我现在也是安卓动态样式不生效 IOS没问题

该问题目前已经被锁定, 无法添加新回复