小程序自定义导航栏，兼容适配所有机型（附完整案例）
前语
大部分情况下咱们都是运用微信官方自带的navigationBar配置，但有时分咱们需求在导航栏集成查找框、自定义背景图、返回主页按钮等。
思路
-
躲藏官方导航栏
-
获取胶囊按钮、状态栏相关数据以供后续核算
-
依据不同机型核算导航栏高度
-
编写新的导航栏c o = m
-
页面引证自定义导航
正文
躲藏官方导航栏
躲藏导航栏能够大局配置，也能够独自页面配置，详细依据事务需求来。
大局躲藏
//app.json
"winI ? `dow": {
"navigationStyli m B d j 5 te": "custom"
}
页面躲藏
//, D M [page.json
{
"navigationStyle": "custom"
}
获取胶囊按钮、状态栏相关数据以供后续核算
公式：导航栏高度 = 状态栏到胶囊的间) T p } m ; E G /隔（胶囊距上鸿沟间隔-状态栏高度） * 2 + 胶囊高度 + 状态栏高度。
由公式得知，咱们需求获取状态栏高度 胶囊高度 胶囊距上间隔
注：状态栏到胶囊的间隔 = 胶囊到下鸿沟间隔。所以这儿需求*2
状态栏高度
用wxE % a @ * + T .getSystem# . E h ` X 1 TInfoSync()官方API能够获取体系相关L u Q信息，statusBarH~ 2 o W c h ] *eight属性能够获取到状态栏高度
const statusBarHeight = wx.getSystemInfoSync().statusBarHeight;
胶囊P | % ; a % ] .高度和胶囊距上鸿沟间隔
用wx.getMenuButtonBH } 9oundingClientRect()官方API能够获取菜单按钮胶囊按钮的布局位置信息。
const menuButtonInfo = wx.getMenuButtonBoundi- l g W l S @ngClientRect();//胶囊相关信息
consti , i menuButtonHeight = menuButtonInfo.height //胶囊b [ 0 R Y 4 . o高度
const menuButtonTop = menuButtonInfo.top//胶囊距上鸿沟间隔
实例
一般情况下，咱们需求在运用启动的初始化生命周期钩子进行核算相关的数据，也3 . T ^ R W 1就是进口文件app.js的onLab G [ O ^ 2 Y 3 Xunch生命周期钩子
//app.js
App({
onLaunch: function () {
thif Z 8 C d r { ( &s.setNavBarInfo()
},
globalDataF Q l v Z h: {
//大局数据管理
navBarHeight: 0, // 导航栏高度
menuBotton: 0, // 胶囊距底部间隔Z i .（坚持& v r Y A g 5底部间隔共同）
menuRight: 0, // 胶囊距右方间隔（方坚持左、右间隔共同）
menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度确保共同）
},
/**
* @description 设置导航栏信息
*/
setNavBarInfo () {
// 获取体系信息
const systemInfo = wx.getSystemInfoSync();
// 胶囊按钮位置信息
const menuButtonInfo = wx.getMenuButtonBoundingClientR0 O G 1 :ect();
// 导航! N g ; U Y栏高度 = 状态栏到胶囊的间隔（胶q B W h X囊距上间隔-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
this.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
this.globalData.menuRighH u , j 3 b x O vt = systemInfo.screenWidth - menuB_ W YuttonInfo.right;
this.globalData.menuHeight = menuButtonInfo.height;
}
})
页面引证自定义导航
//page.wxml / q 7 l !
<view class="nav" style="height:{{navBarHeight}}pxn 4 U;">
<!-- 胶囊区3 = [ h t F域 -->
<view class="capsule-box" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHx ; ? R / 7eight}}px; bott. : / ]om:{{menuBotton}}px;">
<view class="na0 H m 9 * o b *v-handle">
<image class="nav-back-icon" src="/imagesO . w 0 ^ e )/nr { e 6 D Bav_back.png" bind:tap="navToBackLast6 + h = # 8Page"></image>
<image class=% L f"nav-home-icon" src="/images/nav_home.png" bind:tap="navToHomePage"></image>
</l T yview>
<view class="nav-title">导航标题</view>
</view>
</view>
// page.js
const aw $ 1 ( gpp = getA= T y n V = O E Fpp()
Page({
/**
* 页面的初始数据
*/
data: {
navBarHeight: app.globalData.navBarHeigh0 a 5 C s E C (t,//导航栏高度s H H E 4 $
mW u 3 # -enuBotton: app.globalData.menuBotton,//导航栏间隔顶部间隔
menuHeight: app.g% f o d d g 7 m jlobalData.menuHeight //导航栏高度
}
封装成组件
咱们可能在各自的页面实现不一样的效果，比如在导航栏添加查找框，日期等，这个时分咱们就能够封装一个自定义组件，大大提高咱们的开发. ` f l ] – w @ @效率。
新建component
//# P o components/navigation/index.wxml
<view c] & T D S v S 6lass="navQ L n S L h U A" style="& e ( 2height:{{navBarHeighF . 0 ; , ut}}px;">
&lL B : 5 w ` {t;view class="nav-main">
<!-- 胶囊区域 -->
<view
class="capsule-] j G 7 e = = v lbox"
style="height:{{menuHeight}}px; min-height:{{menuHeight}[ Z % K z 2 (}px; line-height:{{menE z e q ZuHeight}}px; bottom:{{menuBotto# ~ Z F 4 * mn}}px;left:{{menuRigh, 3 xt}}px;"
>
<!-- 导航内容区域 -->
<slot>&l` 3 | ; Et;/slot>
</view>
</view>
</view&g+ o a r jt;
// components/navigation/index.wxss
.nav {
po& R G lsition: fixed;
top: 0;
left: 0;
width: 100vw;
}
.navD U ? -mai= ? J y S } Tn {
wiJ } { * @ C * ` /dth: 100%;
height: 100%;
position: relative;
}i = T v h
.nav .capsule-box {
position: absolute;
box-sizing: border-box;
width8 E 0: 100%;
}
// components/navigaf $ 2 { ; / ction/index.js
const app = getApp()
Component({
/**
* 组件的初始数据
*/
data: {
navBarHeight: app.gc { X , D { . @ AlobalData.navBaK 5 k T DrHeight, //导航栏高度
menuRight: app.globalData.menuRight, // 胶囊距右方间隔（方坚持左、右间隔共同）
menuBotton: app.globalData.menuBotton,
menuHeight: ap] d $ lp.globalData.menuHeight
}
})
页面引证
页面配置引入该自定义组件
//index.json
{
"navigationStyle": "custom",
"navigationBarTextStyle": "white",
"u# e / n = H L asingComponents":Q p e 0 o {
"navigation"[ ] Z Y U: "/compoM , _ k N Qnents/Navigation/index"
}
}
页面中运用
<!-- 自定义导航 --&! _ j Sgt;
<navigation>
<0 I 2 U - * ( * x;view class="current-date">
<text>4月24日</text>
</view>
</navigation>L g } Y
总结
本文主要是写自定义导航基础的东西，要点在于怎么核算自定义导航的，详细的事务和样式还需求依据本身产品来设定。如有什么问题，欢迎提出一起学习。
