本文實例為大家分享了微信小程序自定義導航欄的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)自定義大致需要以下?步驟:

1.在頁面.JSON文件進行相關(guān)配置,以便去掉原生

"navigationStyle":"custom"

備注:?navigationStyle（導航欄樣式），參數(shù): default = 默認樣式，custom = 自定義樣式。?

2.在頁面.js文件onLoad生命周期函數(shù)中分別調(diào)用微信的getSystemInfoAsync() 與 getMenuButtonBoundingClientRect()方法

 // 1.獲取膠囊按鈕的布局位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
 // 2.獲取設(shè)備系統(tǒng)信息
    const systemInfo = wx. getSystemInfoAsync();

備注:??wx.getSystemInfoAsync用于獲取設(shè)備信息,?wx.getMenuButtonBoundingClientRect用于獲取獲取膠囊按鈕的布局位置信息

3.根據(jù)上一步調(diào)返回數(shù)據(jù)再按照官方文檔調(diào)用相關(guān)參數(shù)

let a = systemInfo.statusBarHeight + 44;// 導航欄高度
let b = systemInfo.screenWidth - menuButtonInfo.right;// 膠囊距右方間距（方保持左、右間距一致）
let c = menuButtonInfo.top - systemInfo.statusBarHeight;// 膠囊距底部間距（保持底部間距一致）
let d = menuButtonInfo.height;// 膠囊高度（自定義內(nèi)容可與膠囊高度保證一致）

4.最后在頁面使用即可 看樣式

5.完整代碼: ()

index.json 文件 :

{
  "usingComponents": {},
  "navigationStyle":"custom"
 
}

index.js?文件定義 :

 data: {
    navBarHeight: 0, //導航欄高度
    titleBottom: 0, //頂部距離
    title:'自定義頂部'
    // -----
  },

  /**
   * 事件處理
   */
  getHeights() {
    let that = this
    // 1.獲取膠囊按鈕的布局位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    // 2.獲取設(shè)備信息
    const systemInfo = wx.getSystemInfoSync();
    // 3.計算:計算公式：導航欄高度 = 狀態(tài)欄高度 + 44。
    // 導航欄高度 = 狀態(tài)欄高度 + 44
    this.setData({
      navBarHeight: systemInfo.statusBarHeight + 44,
      titleBottom: systemInfo.statusBarHeight
    })
    console.log(systemInfo.statusBarHeight)
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad(options) {
    this.getHeights()
  },

index.wxml?文件頂部使用 :

<!-- 頂部 -->
<view class="contentsPages" style="height:{{navBarHeight}}px; padding: {{titleBottom+45}}rpx 0rpx 0rpx 20rpx;">
  <view class="title">
    {{title}}
  </view>
</view>
<!-- 主體 -->
<view class="content" style="height: calc(100% - {{navBarHeight}}px);">
  內(nèi)容
</view>

index.wxss文件優(yōu)化頁面樣式 :?

page {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
} 

.contentsPages {
  box-sizing: border-box;
  background-color:#f7f7f7;
}

.title{
  font-size: 30rpx;
}

.content{
  width: 100vw;
  box-sizing: border-box;
  background-color: #ffffff;
}

謝謝!文章來源地址http://www.zghlxwxcb.cn/news/detail-484250.html

到了這里，關(guān)于原聲微信小程序自定義頂部導航欄 . 自定義navigationBar。 (單頁面設(shè)置)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！