uniapp自定義小程序頂部導航欄及其適配

用uniapp自定義小程序導航欄我這次用了兩種方法：

　　首先，不管用哪種方法自定義頂部導航欄都要設置小程序page.json中的navigationStyle或者titleNView

　　

 

 

　　 第一種： 使用　uni.getSystemInfo　獲取手機狀態欄的高度 盡量寫在onLoad中，適用於下圖這種貼頂背景及最高一行只有文字的，其實有的機型也會差一點距離，但是因為是文字而且就倆字，所以不會很明顯，當然兩種方法都可以用的，視情況而定

　　

data() {
　　return {
　　　　statusLineHeight: 0　　//狀態欄高度也就是狀態欄下面要展示內容的位置
　　}
},
onLoad() {
　　var _this = this
　　uni.getSystemInfo({
　　　　success: function(data) {
　　　　　　_this.statusLineHeight = data.statusBarHeright*2　　//獲取狀態欄高度 乘2是px與rpx轉換 獲取到的高度單位是px
　　　　}
　　})
}

 

 

　　第二種：這種在頂部導航自定義一個搜索框的情況，用第一種方法在某些機型也會差一些距離，因為這個框很長，離膠囊很近所以差一些距離就會很明顯

　　　　　　使用　uni.getMenuButtonBoundingClientRect　獲取膠囊的坐標，如果有需要也可以獲取到膠囊的寬高，獲取膠囊的top坐標，讓輸入框也用相同的top坐標就行了，盡量寫在onReady中

　　

onReady() {
　　let menuButtonInfo = uni.getMenuButtonBoundingClientRect()　　//獲取膠囊坐標信息
　　this.statusLineHeight = menuButtonInfo.top　　//給輸入框高度賦值　（不乘2的原因是不管什么手機獲取到的膠囊的坐標單位就是px，輸入框從膠囊top位置顯示，文字用這個方法可以試着設置一下line-height跟膠囊一樣高應該也行）
}

　　其實還有一個env(safe-area-inset-top)但是不知道為啥不好使，但是env(safe-area-inset-bottom)適配底部安全區嘎嘎香

uniapp官網 自定義導航欄使用注意