详细问题描述
原生子窗体subNVue,subNVue.setStyle()方法,设置原生子窗体的样式,在安卓端无效。
重现步骤
[步骤]
APP端,因为页面调用了视屏video组件,需要设置一个透明标题栏,显示在视屏上层,使用subNVue,按照官方文档和方法。
1.新建subNVue页面,页面结构
2.设置pages.json文件
3.在页面中调用subNVue
[结果]
subNVue的确是显示出来了,但是通过setStyle()方法动态修改样式,发现只有背景修改成功,高度设置无效。而且苹果手机默认的subNVue高度为100%,导致页面无法滑动,也无法点击操作下层的视屏。
如下图:最左侧为IOS苹果6,右边为安卓机
[期望]
1.能动态设置subNVue的样式。
- 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
1***@qq.com
我也遇到这个问题了,不知道怎么解决 设置"position": "static" 下有问题
2020-01-18 18:03