详细问题描述(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环境下
3 个回复
[已删除]
因为这个web-view组件宽高都是百分之100,所以不起作用!
m***@qq.com - 80后iT老玩童
这个现在有解决方案吗?
webszy - 90后前端
同样出现这个问题,求问如何解决