本篇文章给大家分享的是有关微信小程序中怎么自定义导航栏，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
创新互联是一家集网站建设,景东企业网站建设,景东品牌网站建设,网站定制,景东网站建设报价,网络营销,网络优化,景东网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
step1 自定义
第一步 取得导航栏的控制权
小程序支持自定义导航栏，只需要在app.json文件中，window项中配置
"navigationStyle": "custom"
这样微信就放开了导航栏的控制权，只保留右上角的胶囊。
页面会从视窗的顶部开始渲染，如图
接下来，我们要做的就是实现一个导航栏组件，把它放置在页面原来的默认导航栏的位置，内容什么的完全由开发者自己定制。
step2 功能点
第二步 梳理导航栏的功能点
导航栏高度 包含两个部分：工具栏和title栏， 工具栏的高度一般是固定的20px，title栏的高度需要计算
导航栏内容的定制，需要识别当前页面的性质，根据不同的页面展示不同的内容，可以通过获取当前的页面路由栈来判定当前的页面性质
step3 导航栏组件基本结构
目前快狗打车小程序的基本结构
// navBar.wxml
// scene0 常规首页 个人中心按钮
// scene1 非常规首页 回首页按钮
// scene2 嵌套页 返回上一页按钮 + 回首页按钮
// scene0 常规首页 个性化title
// scene1 其他页 正常title
// 占位用的
Tips：
组件内多了一个占位的place-holder块，是因为某些页面有类似滚动列表的需求，要保证导航栏始终在视窗的顶部的话，需要使用定位，定位之后脱离文档流，在最初的时候需要占位块保证后续的页面内容不会被导航栏遮挡
使用cover-view布局是因为快狗的业务中有类似map的原生组件，使用view的话有被遮挡的风险
step4 高度计算
需要计算title-bar的高度
在 默认导航栏 & 无底部tab栏 的情况下，使用wx.getSystemInfoSync获取手机信息，可以看到两项信息:
这种情况下，二者的差值就是默认的导航栏的高度, 但是在设置了"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 - toolBarstep5 内容定制
在组件的生命周期函数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
以上就是微信小程序中怎么自定义导航栏，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
网页名称：微信小程序中怎么自定义导航栏
分享URL：
http://cdweb.net/article/ppposg.html
