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

更新时间：2019年4月5日10:44:52 作者：快狗打车前端团队

本文主要为您介绍微信小程序自定义导航栏的相关信息。 文章通过示例代码对其进行了非常详细的介绍。 对于大家学习或者使用微信小程序有一定的参考学习价值。 有需要的朋友可以关注一下。 我们一起来学习一下

背景

在制作快狗打车APP时，我们遇到了以下关于默认导航栏的问题：

我们希望的是：各个模型页面的展示一致且个性化，能够控制左上角的点击事件，一键返回深层页面。

完成

定制

第一步，获取导航栏的控制权

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

"navigationStyle": "custom"

这样，微信就放开了对导航栏的控制，只保留了右上角的胶囊。

页面会从窗口顶部开始渲染，如图

接下来我们要做的就是实现一个导航栏组件，并将其放置在页面原来默认的导航栏位置。 内容完全由开发者定制。

功能点

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

导航栏的高度由两部分组成：工具栏和栏。 工具栏的高度一般固定为20px，需要计算栏的高度。

导航栏内容的定制需要识别当前页面的性质。 根据不同的页面显示不同的内容。 通过获取当前页面路由栈可以确定当前页面的性质。

导航栏组件基本结构

目前快狗打车App的基本架构

// navBar.wxml // scene0 常规首页 个人中心按钮 // scene1 非常规首页 回首页按钮 // scene2 嵌套页 返回上一页按钮 + 回首页按钮 // scene0 常规首页 个性化title // scene1 其他页 正常title // 占位用的

尖端：

组件中有一个额外的占位符块，因为某些页面有类似于滚动列表的要求。 如果要保证导航栏始终位于窗口顶部，则需要使用定位。 定位后脱离文档流，需要初始占用。 位块保证后续页面内容不会被导航栏遮挡

使用-view布局是因为快狗的业务有类似地图的原生组件。 如果使用view，就有被屏蔽的风险。

高度计算

需要计算-bar的高度

在默认导航栏且无底部标签栏的情况下微信小程序底部导航栏开发，使用 wx. 获取手机信息，可以看到两条信息：

本例中，两者的区别就是默认导航栏的高度，但是设置了“”:“”后，两个值是相同的，所以我们需要对高度进行统计经验值导航栏。 。

据统计，得到以下结果：

{ 'iPhone': 64, 'iPhoneX': 88, 'Android': 68, 'samsung': 72 }

根据wx的返回值可以获取工具栏的高度。

至此，我们就获得了导航栏的相关高度值

// 导航栏总高度 & 占位块高度 placeHoder = totalBar = { 'iPhone': 64, 'iPhoneX': 88, 'Android': 68, 'samsung': 72 } // 时间、信号等工具栏的高度 toolBar = systermInfo.statusBarHeight // 页面title栏的高度 titleBar = totalBar - toolBar

内容定制

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

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

根据不同的条件显示不同的内容

最终效果