⼩程序⾃定义导航栏实例代码
背景
在做快狗打车⼩程序时，关于默认导航栏，我们遇到了以下的问题：
Android、IOS⼿机对于页⾯title的展⽰不⼀致，安卓title的显⽰不居中
页⾯的title只⽀持纯⽂本级别的样式控制，不能够做更丰富的title效果
左上⾓的事件⽆法监听、定制
路由导航单⼀，只能够返回上⼀页，深层级页⾯的返回不够友好
我们希望的是：在各个机型页⾯上title⼀致性 & 个性化展⽰、取得左上⾓点击事件控制权及深层级页⾯的⼀键返回
实现
step1 ⾃定义
第⼀步取得导航栏的控制权
⼩程序⽀持⾃定义导航栏，只需要在app.json⽂件中，window项中配置
"navigationStyle": "custom"
这样就放开了导航栏的控制权，只保留右上⾓的胶囊。
页⾯会从视窗的顶部开始渲染，如图
接下来，我们要做的就是实现⼀个导航栏组件，把它放置在页⾯原来的默认导航栏的位置，内容什么的完全由开发者⾃⼰定制。
step2 功能点
第⼆步梳理导航栏的功能点
导航栏⾼度（各个机型动态适配）
导航栏内容定制
所有机型title居中显⽰（⾃⼰布局实现）
⾸页导航栏左上⾓显⽰个⼈中⼼、中部title使⽤个性图标
嵌套页⾯左上⾓显⽰返回上⼀页 + 回到⾸页按钮
⾮常规⾸页左上⾓显⽰回到⾸页按钮
导航栏⾼度包含两个部分：⼯具栏和title栏，⼯具栏的⾼度⼀般是固定的20px，title栏的⾼度需要计算
导航栏内容的定制，需要识别当前页⾯的性质，根据不同的页⾯展⽰不同的内容，可以通过获取当前的页⾯路由栈来判定当前的页⾯性质
step3 导航栏组件基本结构
⽬前快狗打车⼩程序的基本结构
// navBar.wxml
<cover-view class='place-holder'></cover-view>
<cover-view class='nav-bar'>
<cover-view class='tool-bar' style='height: 20px'></cover-view>
<cover-view class='title-bar'>
<cover-view class='left-cell'>
// scene0 常规⾸页个⼈中⼼按钮
// scene1 ⾮常规⾸页回⾸页按钮
// scene2 嵌套页返回上⼀页按钮 + 回⾸页按钮
</cover-view>
<cover-view class='center-cell'>
// scene0 常规⾸页个性化title
// scene1 其他页正常title
</cover-view>
<cover-view class='right-cell'>
// 占位⽤的
导航页源码
</cover-view>
</cover-view>
</cover-view>
Tips：
组件内多了⼀个占位的place-holder块，是因为某些页⾯有类似滚动列表的需求，要保证导航栏始终在视窗的顶部的话，需要使⽤定位，定位之后脱离⽂档流，在最初的时候需要占位块保证后续的页⾯内容不会被导航栏遮挡
使⽤cover-view布局是因为快狗的业务中有类似map的原⽣组件，使⽤view的话有被遮挡的风险
step4 ⾼度计算
需要计算title-bar的⾼度
在默认导航栏 & ⽆底部tab栏的情况下，使⽤wx.getSystemInfoSync获取⼿机信息，可以看到两项信息:
screenHeight 屏幕⾼度，单位px
windowHeight 可使⽤窗⼝⾼度，单位px
这种情况下，⼆者的差值就是默认的导航栏的⾼度, 但是在设置了"navigationStyle": "custom"之后，⼆者的值是⼀样的了，因此导航栏的⾼度我们需要使⽤统计的经验值。
根据统计，得到如下的结果：
{
'iPhone': 64,
'iPhoneX': 88,
'Android': 68,
'samsung': 72
}
⼯具栏的⾼度可根据wx.getSystemInfoSync返回值中的statusBarHeight获取。
⾄此，我们得到了导航栏的相关的⾼度值
// 导航栏总⾼度 & 占位块⾼度
placeHoder = totalBar = {
'iPhone': 64,
'iPhoneX': 88,
'Android': 68,
'samsung': 72
}
// 时间、信号等⼯具栏的⾼度
toolBar = systermInfo.statusBarHeight
// 页⾯title栏的⾼度
titleBar = totalBar - toolBar
step5 内容定制
在组件的⽣命周期函数attached中，我们可以获取当前的页⾯路由栈
let pages = getCurrentPages()
let current_page = pages[pages.length - 1].route
const NORMAL_ENTRY = '常规的⼊⼝页路径'
// scene 0 常规⼊⼝页个性化title、个⼈中⼼
pages.length === 1 && current_page === NORMAL_ENTRY
// scene 1 ⾮常规⼊⼝页回⾸页
pages.length === 1 && current_page !== NORMAL_ENTRY
// scene 2 嵌套页⾯返回 + 回⾸页
pages.length > 1
根据不同的条件，展⽰不同的内容
最终效果
scene 0 常规⾸页
scene 1 ⾮常规⾸页
scene 2 嵌套页
⽬前在⽣产环境99%的机型中，都可以完美的运⾏。
写在最后
⾃定义导航栏是全局⽣效的，⼀旦设置，各个原⽣⼩程序页⾯都需要引⼊
⽬前版本7+⽀持了针对特定页⾯的⾃定义导航栏，可以根据需要个性化定制
⾃定义导航栏在web-view页⾯不会起效
有尝试把导航栏做成插件，但是遇到在插件组件中⽆法获取页⾯路由栈的问题，因此没有成功
总结
以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值，谢谢⼤家对的⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。