生活随笔
收集整理的這篇文章主要介紹了
uni-app导航栏配置
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
uni-app寫app的內(nèi)容會與沉浸欄重合在一起，寫好好多，都是有點問題的，這次終于找到解決的方法了，與大家分享一下
最簡單的解決方式就是配置mainfest.json來關(guān)閉沉浸式。即通過打開應(yīng)用的manifest.json文件，切換到代碼視圖，在app-plus -> statusbar 下添加immersed節(jié)點并設(shè)置值為false。
"app-plus" : {"statusbar": { "immersed": false },
}
App因為默認(rèn)為沉浸式，去除導(dǎo)航欄后，頁面頂部會直通到狀態(tài)欄的區(qū)域，可能出現(xiàn)如下需求：
改變狀態(tài)欄文字顏色：設(shè)置該頁面的 navigationBarTextStyle 屬性，可取值為 black/white。如果想單獨設(shè)置顏色，App端可使用plus.navigator.setStatusBarStyle設(shè)置。部分低端Android手機(jī)
自身不支持設(shè)置狀態(tài)欄前景色。
改變狀態(tài)欄背景顏色：通過繪制一個占位的view固定放在狀態(tài)欄位置，設(shè)置此view的背景顏色，即可達(dá)到想要的效果，uni-app提供了一個狀態(tài)欄高度的css變量，具體參考：uni-app內(nèi)置的CSS變量。
<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>
var(–status-bar-height) 此變量在微信小程序環(huán)境為固定 25px，在 5+App 里為手機(jī)實際狀態(tài)欄高度。
當(dāng)設(shè)置 “navigationStyle”:“custom” 取消原生導(dǎo)航欄后，由于窗體為沉浸式，占據(jù)了狀態(tài)欄位置。此時可以使用一個高度為 var(–status-bar-height) 的 view 放在頁面頂部，避免頁面內(nèi)容出現(xiàn)在狀態(tài)欄。（實戰(zhàn)過程中此方案仍不能解決頁面內(nèi)容出現(xiàn)在狀態(tài)欄的問題）
設(shè)置css變量后解決頁面頂部會直通到狀態(tài)欄的區(qū)域的問題：設(shè)置了css變量后，手機(jī)頂部狀態(tài)欄區(qū)域還是會被頁面內(nèi)容覆蓋，可使用plus.navigator.getStatusbarHeight();動態(tài)計算系統(tǒng)狀態(tài)欄的高度barHeight，然后設(shè)置頁面主view的樣式:style="{‘margin-top’:barHeight+‘px’}"，來解決。
<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>統(tǒng)計
</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(){var height = plus.navigator.getStatusbarHeight();_self.barHeight = height;_self.barHeight = 0;},},onLoad:function(){_self = this;_self.getSystemStatusBarHeight();}
}
</script>
<style> </style>
直接修改狀態(tài)欄顏色（全局）的方式
在pages.json中寫默認(rèn)的狀態(tài)欄配置，我是自定義的頂部欄，所以主要看更改狀態(tài)欄的顏色即可
{"path": "pages/index/index","style": {"navigationBarTitleText": "首頁","app-plus":{"titleNView":false //去掉當(dāng)前頁的頂部導(dǎo)航欄},"navigationBarBackgroundColor":"#FE5786","navigationBarTextStyle":"white" //狀態(tài)欄字體顏色}},
動態(tài)修改狀態(tài)欄顏色，style可設(shè)置為dark和light ，字符串類型
void plus.navigator.setStatusBarStyle(style);void plus.navigator.setStatusBarStyle("dark"); //黑色void plus.navigator.setStatusBarStyle("light");//白色
總結(jié)
以上是生活随笔為你收集整理的uni-app导航栏配置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
