微信小程序自定义导航栏示例代码

背景

在做快狗打车小程序的时候，我们遇到了以下关于默认导航栏的问题：

安卓和IOS手机显示不同的页面标题。安卓标题显示不居中。页面标题仅支持纯文本级别的样式控件，无法产生更丰富的标题效果。左上角的事件无法监控，定制的路由导航单一，只能返回上一页。深层页面的返回不够友好。我们希望的是：各模型页面标题一致的个性化显示，左上角点击事件的控制，深层次页面的一键返回。

实现

定制

第一步是控制导航栏

小程序支持自定义导航栏，只需要在app.json文件和窗口项中配置即可

NavigationStyle': '自定义'，所以微信释放了导航栏的控制，只保留右上角的胶囊。

页面从窗口顶部呈现，如图所示

接下来，我们需要做的是实现一个导航栏组件，并将其放入页面的原始默认导航栏中，内容完全由开发人员定制。

步骤2功能点

第二步是梳理导航栏的功能点

导航栏高度(各型号动态适配)导航栏内容定制所有型号标题显示在中央(通过自己的布局实现)。个人中心显示在主页导航栏的左上角，中间标题的左上角嵌套有个性图标。返回上一页按钮非常规左上角显示返回主页按钮。导航栏高度由两部分组成：工具栏和标题栏。工具栏的高度一般固定在20px，需要计算标题栏的高度

自定义导航栏内容需要识别当前页面的性质，根据不同的页面显示不同的内容，通过获取当前页面的路由栈来判断当前页面的性质

step3导航栏组件的基本结构

当前快速狗出租车小程序的基本结构

//nav bar . wxmlcover-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'/scene 0常规主页个人中心按钮//scene1非常规主页返回主页按钮//scene2嵌套页返回上一页按钮/Cover-view Cover-view Cover-view class='中心-cell '/

组件中有一个占位符占位符块，因为有些页面对滚动列表有类似的要求。要确保导航栏始终位于窗口顶部，您需要使用定位。定位后，您需要一个占位符块来确保后续页面内容不会被导航栏阻止

之所以使用Cover-view布局，是因为在fast dog business中有类似map的原生组件，并且在使用view时存在被阻止的风险

高度计算

需要计算标题栏的高度

默认导航栏底部没有标签栏时，使用wx.getSystemInfoSync获取手机信息，可以看到两条信息：

ScreenHeight屏幕高度，单位px windowHeight可以用windowHeight，单位px在这种情况下，两者的区别就是默认的导航栏高度，但是在设置‘navigationStyle’:‘custom’之后，这两个值是一样的，所以我们需要对导航栏高度使用统计经验值。

根据统计，得到以下结果：

{'iphone' : 64，' iphonex' : 88，' Android' : 68，' Samsung' : 72}工具栏高度可根据statusBarHeight在wx.getSystemInfoSync返回值中获取。

此时，我们得到了导航栏的相关高度值

//导航栏占位符的总高度高度placehoder=totalBar={ ' iphone ' : 64，' iphonex' : 88，' Android' : 68，Samsung': 72}//时间和信号等工具栏的高度Toolbar=systermInfo.statusBarHeight//页面标题栏的高度titleBar=totalBar-toolBarstep5内容自定义

在组件的生命周期函数中，我们可以得到当前的页面路由栈

Let pages=getcurrentpages()让current _ page=pages [pages。长度-1]。route const normal _ entry='一般入口页面路径'/场景0一般入口页面个性化标题，Personal center pages . length===1 current _ page===normal _ entry//场景1非常规入口页面返回首页页面。length===1current _ page！==NORMAL_ENTRY//场景2嵌套页面返回首页页面长度1根据不同情况显示不同内容

最终效果

场景0常规主页

场景1非常规主页

场景2嵌套页面

目前，生产环境中99%的模型都能完美运行。

写在最后

自定义导航栏是全局有效的。设置好之后，需要引入所有的原生小程序页面。目前微信7版支持针对特定页面的自定义导航栏，可以根据需要进行自定义。自定义导航栏在网页视图页面上不起作用。尝试将导航栏做成插件，但是遇到了插件组件中无法获取页面路由栈的问题，所以没有总结成功。

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。