uni-app导航栏配置

蒙茸茸 發表於 2019-9-18 10:22:00

uni-app写app的内容会与沉浸栏重合在一起，写好好多，都是有点问题的，这次终于找到解决的方法了，与大家分享一下
 
<ul>
<li>最简单的解决方式就是配置mainfest.json来关闭沉浸式。即通过打开应用的manifest.json文件，切换到代码视图，在app-plus -> statusbar 下添加immersed节点并设置值为false。</li>
</ul>
<div class="cnblogs_code">
<pre>"app-plus" : {
"statusbar": {
 "immersed": false
},
}</pre>
</div>
App因为默认为沉浸式，去除<code>导航栏</code>后，页面顶部会直通到<code>状态栏</code>的区域，可能出现如下需求：
<ul>
<li>改变状态栏文字颜色：设置该页面的 navigationBarTextStyle 属性，可取值为 black/white。如果想单独设置颜色，App端可使用plus.navigator.setStatusBarStyle设置。部分低端Android手机</li>
<ul>
<li>自身不支持设置状态栏前景色。</li>
<li>改变状态栏背景颜色：通过绘制一个占位的view固定放在状态栏位置，设置此view的背景颜色，即可达到想要的效果，uni-app提供了一个状态栏高度的css变量，具体参考：uni-app内置的CSS变量。</li>
</ul>
</ul>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"><template>
<view>
 
 <view class="status_bar">
 <view class="top_view"></view>
 </view>
 
 <view>

 </view>
</view>
</template>

<script>
export default {
data() {
 return {

 }
},
methods: {

}
}
</script>

<style>
.status_bar {
height: var(--status-bar-height);
width: 100%;
background-color: #F8F8F8;
}
.top_view {
height: var(--status-bar-height);
width: 100%;
position: fixed;
background-color: #F8F8F8;
top: 0;
z-index: 999;
}
</style>
</pre>
</div>
　　
<ul>
<li>var(--status-bar-height) 此变量在微信小程序环境为固定 25px，在 5+App 里为手机实际状态栏高度。</li>
<li>当设置 "navigationStyle":"custom" 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部，避免页面内容出现在状态栏。（实战过程中此方案仍不能解决页面内容出现在状态栏的问题）</li>
</ul>
<code>设置css变量后解决页面顶部会直通到状态栏的区域的问题</code>：设置了css变量后，手机顶部状态栏区域还是会被页面内容覆盖，可使用plus.navigator.getStatusbarHeight();动态计算系统状态栏的高度barHeight，然后设置页面主view的样式<code>:style="{'margin-top':barHeight+'px'}"，</code>来解决。
 
<div class="cnblogs_code">
<pre><template>
<view class="uni-flex uni-column" style="height: 100%;">
 
 <view class="status_bar">
 <view class="top_view"></view>
 </view>
 

 <view class="uni-flex uni-row jk-bg-blue uni-center" style="height: 12%;" :style="{'margin-top':barHeight+'px'}">
 <view class="flex-sub jk-header uni-flex uni-column justify-start" @tap="test1">
 <text class="text-white cuIcon-scan"></text>
 <text>扫码</text>
 </view>
 <view class="flex-treble jk-header uni-flex uni-column justify-center" @tap="test2">
 <text class="text-white cuIcon-rank"></text>
 <text>统计</text>
 </view>
 <view class="flex-sub jk-header uni-flex uni-column justify-end" @click="test3">
 <text class="text-white cuIcon-exit"></text>
 <text>退出</text>
 </view>
 </view>

 <view class="uni-flex align-center uni-row margin-xs" style="height: 78%;">

 </view>

 <view class="uni-flex uni-row uni-center" style="height: 10%;color: #000000;background-color: F8F8F8;border-top: 3px solid #eee;">

 </view>

</view>
</template>

<script>
var _self;
export default {
components: {
 uniPopup,
},
data() {
 return {
 barHeight:25,
 }
},
methods: {
 //获取系统状态栏高度
 getSystemStatusBarHeight:function(){
 // #ifdef APP-PLUS
 var height = plus.navigator.getStatusbarHeight();
 _self.barHeight = height;
 // #endif
 // #ifdef H5
 _self.barHeight = 0;
 // #endif
 },
},
onLoad:function(){
 _self = this;
 _self.getSystemStatusBarHeight();

}
}
</script>
<style>

</style></pre>
</div>
https://www.jianshu.com/p/7344c4066e82 
来源：https://www.cnblogs.com/liujun1128/p/11540049.html

頁: [1]

琼殿技术论坛's Archiver

uni-app导航栏配置