微信小程序如何自定義導航欄

小編給大家分享一下微信小程序如何自定義導航欄，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

CustomNavBar.wxml

<template name="CustomNavBar">
 <block wx:if="{{ showNavBar }}">

 <!-- 自定義導航欄懸浮時，卡空行 -->
 <block wx:if="{{ needFixed }}">
  <view ></view>
 </block>

 <view class="custom-navbar-con relative {{ iOS ? ' ios ' : ' android ' }}" >
  <view class="custom-navbar-statusbar-con relative" ></view>
  <view class="custom-navbar-content relative" >

  <!-- iOS端的導航欄顯示方式 -->
  <block wx:if="{{ navTitle && navTitle.length > 0 }}">
   <view class="custom-navbar-title ios">{{ navTitle }}</view>
  </block>

  <block wx:if="{{ showLeftMenu }}">
   <view class="custom-navbar-left-menu-con clearfix" >
   <block wx:if="{{ showBackBtn }}">
    <view class="custom-navbar-icon-btn pull-left back"  bindtap="customNavBarBack">
    <image class="icon" src="../../image/icon-nav-back.png" mode="aspectFit"  />
    <text class="text"></text>
    </view>
   </block>

   <block wx:if="{{ showHomeBtn }}">
    <view class="custom-navbar-icon-btn pull-left home"  bindtap="customNavBarBackToHome">
    <image class="icon" src="../../image/icon-nav-home.png" mode="aspectFit"  />
    <text class="text"></text>
    </view>
   </block>

   <!-- android端的導航欄顯示方式 -->
   <block wx:if="{{ navTitle && navTitle.length > 0 }}">
    <view class="custom-navbar-title android pull-left" >{{ navTitle }}</view>
   </block>
   </view>
  </block>
  </view>
 </view>
 </block>
</template>

CustomNavBar.wxss

.custom-navbar-con { position: relative; width: 100%; background-color: white; z-index: 9999; }
.custom-navbar-con .custom-navbar-statusbar-con { width: 100%; }
.custom-navbar-con .custom-navbar-content { width: 100%; }
.custom-navbar-con .custom-navbar-left-menu-con { position: absolute; }
.custom-navbar-con .custom-navbar-left-menu-con .custom-navbar-icon-btn { height: 100%; border-radius: 200px; border: 1px solid rgba(220, 220, 220, 0.6); }
.custom-navbar-con .custom-navbar-left-menu-con .custom-navbar-icon-btn .icon { height: 90%; margin-top: 2.5%; }
.custom-navbar-con .custom-navbar-left-menu-con .custom-navbar-icon-btn .text { font-size: 27rpx; }
.custom-navbar-con .custom-navbar-left-menu-con .custom-navbar-icon-btn.back { border: none; }
.custom-navbar-con .custom-navbar-left-menu-con .custom-navbar-icon-btn.back~.custom-navbar-icon-btn.home { margin-left: 10rpx; }
.custom-navbar-con .custom-navbar-left-menu-con .custom-navbar-icon-btn.switch-shop { padding-left: 5px; padding-right: 25rpx; }


.custom-navbar-con.ios .custom-navbar-title.android { display: none; }
.custom-navbar-con.android .custom-navbar-title.ios { display: none; }
.custom-navbar-con .custom-navbar-title.ios { font-weight: bold; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
.custom-navbar-con .custom-navbar-title.android { padding-left: 30rpx; }```

CustomNavBar.js

```javascript
module.exports = function(PageInstance) {
 let App = getApp()

 let _tplData = {
 _CustomNavBar_: {
  navRightMenuRect: App.NavRightMenuRect,
  navRightMenuCenterY: App.NavRightMenuCenterY,
  statusBarHeight: App.StatusBarHeight,
  winWidth: App.WinWidth,
  winHeight: App.WinHeight,
  iOS: App.iOS,

  navTitle: '', // 當前只合適短標題，如需長標題，建議隱藏自定義導航欄，自定義展示
  navHeight: App.CustomNavHeight,

  needFixed: false,

  showNavBar: !App.NavRightMenuRect ? false : true,
  showLeftMenu: true,
  showBackBtn: true,
  showHomeBtn: false
 }
 }

 let _tplMethods = {
 customNavBarBack() {
  wx.navigateBack()
 },
 customNavBarBackToHome() {
  let url = '/pages/index/index'
  wx.reLaunch({
  url: url
  })
 }
 }
 let isIndexPage = !!(PageInstance.route == 'pages/index/index')
 let pages = getCurrentPages()
 if (pages.length == 1) {
 _tplData._CustomNavBar_.showBackBtn = false
 _tplData._CustomNavBar_.showHomeBtn = !isIndexPage
 }

 // 每個頁面 可單獨配置自定義導航欄
 if (PageInstance.data.CustomNavBarConfig) {
 Object.assign(_tplData._CustomNavBar_, PageInstance.data.CustomNavBarConfig)
 }

 // !!!! 最后執(zhí)行
 // 當無法獲取到右上角按鈕膠囊的布局位置時，強制設置自定義導航欄為隱藏狀態(tài)
 if (!App.NavRightMenuRect) {
 _tplData._CustomNavBar_.showNavBar = false
 }

 Object.assign(PageInstance, _tplMethods)
 PageInstance.setData(_tplData)
 return this
}

app.js的配置

// 自定義導航欄
import CustomNavBar from './template/CustomNavBar/CustomNavBar';

 App({
 //自定義 模板式 組件
 CustomNavBar,
 
 // 系統(tǒng)信息
  WinWidth: 0,
  WinHeight: 0,
  StatusBarHeight: 0,
  PixelRatio: 1,
  SystemFullName: '',
  SystemVersion: '',
  SystemSDKVersion: '',

  //自定義導航欄相關
  NavRightMenuRect: null,
  NavRightMenuCenterY: 0,
  CustomNavHeight: 0,
  
 onLaunch: function (options) {
 let self = this
 let systemInfo = wx.getSystemInfoSync()
 self.iOS = systemInfo.platform === 'ios'
 self.isDebug = systemInfo.platform === 'devtools'
 if (self.isDebug) {
  // 單純?yōu)榱嗽陂_發(fā)工具下調試 自定義導航欄
  // 開發(fā)工具下不存在App版本號的區(qū)分
  systemInfo.version = '7.0.0'
 }
 self.WinWidth = systemInfo.windowWidth
 self.WinHeight = systemInfo.windowHeight
 self.StatusBarHeight = systemInfo.statusBarHeight
 // 部分小程序庫版本沒有返回狀態(tài)欄高度
 if (!self.StatusBarHeight) {
  self.StatusBarHeight = 20
 }
 self.PixelRatio = Math.max(systemInfo.pixelRatio, 2)
 self.SystemFullName = systemInfo.system
 self.SystemVersion = systemInfo.version
 self.SystemSDKVersion = systemInfo.SDKVersion

 // app.json全局配置的自定義導航欄的話，客戶端需求版本為6.6.0
 // 每個頁面 單獨配置的自定義導航欄的話，客戶端需求版本為7.0.0
 // wx.getMenuButtonBoundingClientRect方法，要求基礎庫版本為2.1.0
 if (self.compareVersion(self.SystemVersion, '6.6.0') >= 0) {
  // 官方的6.6.0版本以上客戶端，最低基礎庫版本為1.9.4
  // 6.6.0以上且[1.9.4 - 2.1.0]范圍內(nèi)的機型無法使用wx.getMenuButtonBoundingClientRect
  // 所以手動寫死非全面屏手機的適配膠囊布局位置
  self.NavRightMenuRect = {
  top: 26,
  bottom: 58,
  right: self.WinWidth - 10,
  width: 87,
  height: 32
  }
  // 如果系統(tǒng)信息返回的狀態(tài)欄高度大于20，認為是全面屏手機
  if (self.StatusBarHeight > 20) {
  self.NavRightMenuRect.top = 50
  self.NavRightMenuRect.bottom = 82
  }

  // 2019年08月21日22:09:22
  // 微信小程序庫出現(xiàn)bug，導致部分機型wx.getMenuButtonBoundingClientRect無返回值
  // 所以在這之前先默認寫死一個NavRightMenuRect，防止全局的自定義導航欄已經(jīng)隱藏了但是無法顯示自定義導航欄
  // 詳見https://developers.weixin.qq.com/community/develop/doc/00062238d78e880aedd88b72351c00
  if (wx.getMenuButtonBoundingClientRect) {
  let NavRightMenuRect = wx.getMenuButtonBoundingClientRect()
  self.NavRightMenuRect = {
   top: NavRightMenuRect.top,
   bottom: NavRightMenuRect.bottom,
   right: NavRightMenuRect.right,
   width: NavRightMenuRect.width,
   height: NavRightMenuRect.height
  }
  }

  self.NavRightMenuCenterY = self.NavRightMenuRect.top + self.NavRightMenuRect.height / 2
  self.CustomNavHeight = self.NavRightMenuRect.bottom + (self.NavRightMenuRect.top - self.StatusBarHeight)
 } else {
  self.NavRightMenuRect = null
  self.CustomNavHeight = 0
 }
 },
 
  // 比較兩個版本號
 compareVersion (v1, v2) => {
   v1 = v1.split('.')
   v2 = v2.split('.')
   const len = Math.max(v1.length, v2.length)
 
   while (v1.length < len) {
     v1.push('0')
   }
   while (v2.length < len) {
     v2.push('0')
   }
 
   for (let i = 0; i < len; i++) {
     const num1 = parseInt(v1[i])
     const num2 = parseInt(v2[i])
 
     if (num1 > num2) {
       return 1
     } else if (num1 < num2) {
       return -1
     }
   }
   return 0
 } 
    
}),

假如在index 頁面引用

index.wxml

<!-- 自定義NavBar -->
<import src="../../template/CustomNavBar/CustomNavBar.wxml" />
<template is="CustomNavBar" data="{{ ..._CustomNavBar_ }}"></template>

index.js

onLoad: function(options) {
  new App.CustomNavBar(this)
 }

以上是“微信小程序如何自定義導航欄”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！