目錄
自定義導(dǎo)航欄介紹：
自定義導(dǎo)航欄的使用
step1：取消默認(rèn)的原生導(dǎo)航欄
step2：在頁面中添加占位元素
自定義導(dǎo)航欄介紹：
????????一般用于圖片等的填充或者其他特殊需求，如果使用純色填充頂部欄可以直接使用navigationBarBackgroundColor完成
page.json文件:
"navigationBarBackgroundColor": "#FED000"效果：
自定義導(dǎo)航欄的使用
step1：取消默認(rèn)的原生導(dǎo)航欄
page.json文件page的style中添加代碼
"navigationStyle":"custom"step2：在頁面中添加占位元素
占位高度包括：
文章來源：http://www.zghlxwxcb.cn/news/detail-511039.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-511039.html
<!-- 狀態(tài)欄高度 -->
<view :style="{ height: `${statusBarHeight}px` }"></view>
<!-- 自定義導(dǎo)航欄高度 并 居中 -->
<view :style="{
height: `${barHeight}px`,
'line-height': `${barHeight}px`,
'text-align': 'center',
}">
<text>評(píng)價(jià)</text>
</view>onLoad() {
// 狀態(tài)欄高度
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
// 膠囊數(shù)據(jù)
const { top, height } = wx.getMenuButtonBoundingClientRect();
// 自定義導(dǎo)航欄高度 = 膠囊高度 + 膠囊的padding*2, 如果獲取不到設(shè)置為38
this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
},到了這里，關(guān)于uniapp小程序自定義頂部導(dǎo)航欄高度適配的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
