i***@xinze.me
i***@xinze.me
  • 发布:2019-01-22 23:26
  • 更新:2019-03-21 14:18
  • 阅读:2016

titleNView隐藏情况下,webview占位符不起作用

分类:uni-app

详细问题描述(DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)
[内容]
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "随商商城",
"onReachBottomDistance": 60,
"enablePullDownRefresh": true,
"app-plus": {
"titleNView": false
}
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}

<template>
<view>
<view class="status_bar"> <view class="top_view"></view> </view>
<web-view src="https://test.shopsuite.cn/h5"></web-view>
</view>
</template>

<script>
export default {
data: function() {
return {
options: {},
url: ''
};
},
onLoad: function(options) {}
};
</script>

<style>
/每个页面公共css /
.status_bar {
height: var(--status-bar-height);
width: 100%;
}

.top_view {  
    height: var(--status-bar-height);  
    width: 100%;  
    position: fixed;  
    top: 0;  
}  

</style>

重现步骤
[步骤]
1、去掉导航栏
"app-plus": {
"titleNView": false
}

2、webview 顶部增加状态栏占位view

<template>
<view>
<view class="status_bar"> <view class="top_view"></view> </view>
<web-view src="https://test.shopsuite.cn/h5"></web-view>
</view>
</template>

<script>
export default {
data: function() {
return {
options: {},
url: ''
};
},
onLoad: function(options) {}
};
</script>

<style>
/每个页面公共css /
.status_bar {
height: var(--status-bar-height);
width: 100%;
}

.top_view {  
    height: var(--status-bar-height);  
    width: 100%;  
    position: fixed;  
    top: 0;  
}  

</style>

[结果]
占位状态栏在不起作用。。。。

[期望]

占位状态栏在其它页面气作用,但是在webview上面不起作用。。。。

IDE运行环境说明
[HBuilder 或 HBuilderX]
[windows版本号]

App运行环境说明
[Android版本号]

真机Android环境下

2019-01-22 23:26 负责人:无 分享
已邀请:
[已删除]

[已删除]

因为这个web-view组件宽高都是百分之100,所以不起作用!

m***@qq.com

m***@qq.com - 80后iT老玩童

这个现在有解决方案吗?

webszy

webszy - 90后前端

同样出现这个问题,求问如何解决

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