微信小程序怎么實現自定義導航欄

今天小編給大家分享一下微信小程序怎么實現自定義導航欄的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

1、要實現自定義導航欄，首先得在全局進行相關配置

app.json頁面

"window": {
    ...
    "navigationStyle": "custom"
},

根據微信小程序官方文檔的說法，只有客戶端7.0.0以上版本才支持局部頁面實現自定義導航欄，7.0.0以下版本只支持全體頁面的自定義導航欄，自己項目里采用的是就是這種

app.js頁面

App({
  onLaunch: function(options) {
    var _this = this;
    
    //自定義導航欄 獲取設備頂部窗口的高度（不同設備窗口高度不一樣，根據這個來設置自定義導航欄的高度）
    wx.getSystemInfo({
      success: (res) => {
        // 基礎庫 2.1.0 開始支持wx.getMenuButtonBoundingClientRect()，低版本需要適配
        let custom = wx.getMenuButtonBoundingClientRect()
        // console.log('狀態欄高度',res.statusBarHeight)
        // console.log('右上角膠囊按鈕的高度', custom.height)
        // console.log('右上角膠囊按鈕的上邊界坐標', custom.top)
        // console.log('右上角膠囊按鈕的下邊界坐標', custom.bottom)
        _this.globalData.statusBarHeight = res.statusBarHeight
        _this.globalData.navBarHeight = custom.height + (custom.top - res.statusBarHeight) * 2
      }
    })
  },

  globalData: { // 全局數據
    statusBarHeight: 0,
    navBarHeight: 0,
  },
})

2、創建自定義導航欄組件，組件目錄為 /components/navbar

navbar.wxml頁面

<!-- 默認為黑色的返回鍵-->
<view class='nav-wrap nav-bgc-class' style='height: {{statusBarHeight + navBarHeight}}px;'>
  <!--  左上角的返回按鈕 其中wx:if='{{navbarData.showCapsule}}' 是控制左上角按鈕的顯示隱藏，1為顯示，0為隱藏 -->
  <view class='nav-capsule' style='margin-top: {{statusBarHeight}}px; height: {{navBarHeight}}px;' wx:if='{{navbarData.showCapsule}}' bindtap='_navback'>
    <image class='back-pre ex-back-pre' src='{{navbarData.backSrc || "/img/back4.png"}}' mode='aspectFill'></image>
  </view>
    <!--  中間的標題 -->
  <view class='nav-title nav-title-class' style='margin-top: {{statusBarHeight}}px; height: {{navBarHeight}}px;'>{{navbarData.title}}</view>
</view>

navbar.js頁面

const app = getApp()
Component({
  // multipleSlots 為組件開啟多插槽模式
  options: {
    multipleSlots: true,
  },
  // externalClasses 為組件指定多個外部樣式類
  externalClasses: ['nav-bgc-class', 'nav-title-class','ex-back-pre'],
  // properties 組件用來儲存外部數據
  properties: {
    navbarData: { //navbarData   由父頁面傳遞的數據，變量名字自命名
      type: Object,
      value: {},
      observer: function (newVal, oldVal) { }
    },
  },
  // 組件用來儲存內部私有數據
  data: {
    // 自定義導航欄的高度
    statusBarHeight: app.globalData.statusBarHeight,
    navBarHeight: app.globalData.navBarHeight
  },
  // attached函數 當組件進入頁面節點樹時觸發，可以使用setData，絕大多數初始化工作在這個時機進行
  attached: function () {},
  // methods對象 定義組件內的各種方法
  methods: {
    // 返回鍵，觸發自定義事件，將返回的事件交給父級頁面來分情況定義
    _navback() {
      this.triggerEvent('goBack')
    }
  }
})

navbar.json頁面

{
  "component": true
}

navbar.wxss頁面

/* 頂部固定定位   標題要居中   自定義按鈕和標題要和右邊微信原生的膠囊上下對齊 */
.nav-wrap {
  position: fixed;
  width: 750rpx;
  top: 0;
  left: 0;
  right: 0;
  background: #f4f4f4;
  /* background-color: pink; */
  z-index: 9999999;
  transform: translate3d(0, 0, 0);
}

/* 返回鍵 */
.nav-capsule {
  width: 140rpx;
  /* background-color: skyblue; */
  /* 讓里面的圖片元素垂直居中 */
  display: flex;
  align-items: center;
}

.back-pre {
  width: 100rpx;
  height: 68rpx;
  /* background-color: green; */
}

/* 標題 */
.nav-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 400rpx;
  margin: auto;
  /* background-color: deeppink; */
  /* 水平垂直居中 */
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* 超出部分省略號顯示 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 字體設置 */
  color: #111111;
  font-size: 32rpx;
  font-weight: 500;
}

3、在其它頁面使用自定義導航欄組件（需要修改默認樣式）

transation_detail.json頁面

{
  "usingComponents": {
    "nav-bar": "/components/navbar/navbar",
  }
}

transation_detail.wxml頁面

<!-- 引入自定義導航欄組件 -->
<nav-bar bind:goBack="_goBack" nav-bgc-class="ex-nav-bgc-class" nav-title-class="ex-nav-title-class" ex-back-pre="ex-back-pre" navbar-data='{{nvabarData}}'>
</nav-bar>

transation_detail.wxss頁面

/* 需要從外部傳入導航欄組件的樣式 */

/* 導航欄背景色 */

.ex-nav-bgc-class {
  background: transparent !important;
}

/* 導航欄標題顏色 */

.ex-nav-title-class {
  color: #fff !important;
}

/* 導航欄返回鍵樣式 */
.ex-back-pre {
  width: 60rpx!important;
  height: 60rpx!important;
  margin-top: 4rpx!important;
  padding: 40rpx!important;
}

transation_detail.js頁面

const app = getApp()
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    // 自定義導航欄需要的參數
    nvabarData: {
      showCapsule: 1, //是否顯示左上角圖標   1表示顯示    0表示不顯示
      title: '', //導航欄 中間的標題
      backSrc: '/img/back3.png'    // 返回鍵的樣式
    },
    // 此頁面 頁面內容距最頂部的距離
    height: app.globalData.statusBarHeight + app.globalData.navBarHeight,
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function(options) {},
  
  // 點擊 頂部返回鍵時 要返回的頁面
  _goBack() {
    wx.switchTab({
      url: '/pages/mer_index/mer_index',
    })
  },
})

4、自定義導航欄可以不傳樣式，這時會采用默認樣式

order.wxml頁面

<!-- 引入自定義導航欄組件 -->
<nav-bar bind:goBack="_goBack" navbar-data='{{nvabarData}}'></nav-bar>

order.js頁面

const app = getApp()
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    // 自定義導航欄需要的參數
    nvabarData: {
      showCapsule: 1, //是否顯示左上角圖標   1表示顯示    0表示不顯示
      title: '現有倉單', //導航欄 中間的標題
    },
    // 此頁面 頁面內容距最頂部的距離

以上就是“微信小程序怎么實現自定義導航欄”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。