⼩程序⾃定义navigationBar顶部导航栏适配所有机型（附完整案例）前⾔
navigationBar相信⼤家都不陌⽣把？今天我们就来说说⾃定义navigationBar，把它改变成我们想要的样⼦（搜索框+胶囊、搜索框+返回按钮+胶囊等）。
思路
隐藏原⽣样式
获取胶囊按钮、状态栏相关数据以供后续计算
根据不同机型计算出该机型的导航栏⾼度，进⾏适配
编写新的导航栏
引⽤到页⾯
正⽂
⼀、隐藏原⽣的navigationBar
window全局配置⾥有个参数：navigationStyle（导航栏样式），default=默认样式，custom=⾃定义样式。
"window": {
"navigationStyle": "custom"
}
让我们看看隐藏后的效果：
可以看到原⽣的navigationBar已经消失了，剩下孤零零的胶囊按钮，胶囊按钮是⽆法隐藏的。
⼆、准备⼯作
1.获取胶囊按钮的布局位置信息
我们⽤wx.getMenuButtonBoundingClientRect() 【】获取胶囊按钮的布局位置信息，坐标信息以屏幕左上⾓为原点：
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
width height top right bottom left
宽度⾼度上边界坐标右边界坐标下边界坐标左边界坐标
下⾯是官⽅给的⽰意图，⽅便⼤家理解⼏个坐标。
2.获取系统信息
⽤wx.getSystemInfoSync() 【】获取系统信息，⾥⾯有个参数：statusBarHeight（状态栏⾼度），是我们后⾯计算整个导航栏的⾼度需要⽤到的。
const systemInfo = wx.getSystemInfoSync();
三、计算公式
我们先要知道导航栏⾼度是怎么组成的，计算公式：导航栏⾼度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏⾼度） * 2 + 胶囊⾼度 + 状态栏⾼度。
实例【】
⾃定义导航栏会应⽤到多个、甚⾄全部页⾯，所以封装成组件，⽅便调⽤；下⾯是我写的⼀个简单例⼦：
app.js
App({
onLaunch: function(options) {
const that = this;
// 获取系统信息
const systemInfo = wx.getSystemInfoSync();
// 胶囊按钮位置信息
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
// 导航栏⾼度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏⾼度） * 2 + 胶囊⾼度 + 状态栏⾼度
that.globalData.navBarHeight = (p - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
uRight = systemInfo.screenWidth - menuButtonInfo.right;
uBotton = p - systemInfo.statusBarHeight;
uHeight = menuButtonInfo.height;
},
// 数据都是根据当前机型进⾏计算，这样的⽅式兼容⼤部分机器
globalData: {
navBarHeight: 0, // 导航栏⾼度
menuRight: 0, // 胶囊距右⽅间距（⽅保持左、右间距⼀致）
menuBotton: 0, // 胶囊距底部间距（保持底部间距⼀致）
menuHeight: 0, // 胶囊⾼度（⾃定义内容可与胶囊⾼度保证⼀致）
}
})
app.json
{
写文章的小程序
"pages": [
"pages/index/index"
],
"window": {
"navigationStyle": "custom"
},
"sitemapLocation": "sitemap.json"
}
下⾯为组件代码： /components/navigation-bar/navigation-bar.wxml
<!-- ⾃定义顶部栏 -->
<view class="nav-bar" >
<input class="search" placeholder="输⼊关键词！" style="height:{{menuHeight}}px; min-height:{{men
uHeight}}px; line-height:{menuHeight}}px; left:{{menuRight}}px; bottom:{{menuBotton}}px;"></input> </view>
<!--
内容区域：
⾃定义顶部栏⽤的fixed定位，会遮盖到下⾯内容，注意设置好间距
-->
<view class="content" ></view>
/components/navigation-bar/navigation-bar.json
{
"component": true
}
/components/navigation-bar/navigation-bar.js
const app = getApp()
Component({
properties: {
// defaultData（⽗页⾯传递的数据-就是引⽤组件的页⾯）
defaultData: {
type: Object,
value: {
title: "我是默认标题"
},
observer: function(newVal, oldVal) {}
}
},
data: {
navBarHeight: app.globalData.navBarHeight,
menuRight: uRight,
menuBotton: uBotton,
menuHeight: uHeight,
},
attached: function() {},
methods: {}
})
/components/navigation-bar/navigation-bar.wxss
.
nav-bar{ position: fixed; width: 100%; top: 0; color: #fff; background: #000;}
.nav-bar .search{ width: 60%; color: #333; font-size: 14px; background: #fff; position: absolute; border-radius: 50px; background: #ddd; padding-left: 14px;}
以下是调⽤页⾯的代码，也就是引⽤组件的页⾯： /pages/index/index.wxml
navigation-bar default-data="{{defaultData}}"></navigation-bar>
/pages/index/index.json
{
"usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar"
}
}
/pages/index/index.js
const app = getApp();
Page({
data: {
// 组件参数设置，传递到组件
defaultData: {
title: "我的主页", // 导航栏标题
}
},
onLoad() {
console.log(this.data.height)
}
})
效果图：
好了，以上就是全部代码了，⼤家可以⽂中复制代码，也可以【】
，直接到开发者⼯具⾥运⾏，记得appid⽤⾃⼰的或者测试哦！
下⾯附⼏张其它⼩程序的效果图，⼤家也可以尝试照着做：
总结
本⽂写了⾃定义navigationBar的⼀些基础性东西，⾥⾯涉及组件⽤法、参数传递、导航栏相关。
由于测试环境有限，⼤家在使⽤时如果发现有什么问题，希望及时反馈，以供及时更新帮助更多的⼈！
到此这篇关于⼩程序⾃定义navigationBar顶部导航栏适配所有机型（附完整案例）的⽂章就介绍到这了，更多相关⼩程序navigationBar顶部导航栏内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！