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


Posted in Javascript onApril 05, 2019

背景

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

  • 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页面不会起效
  • 有尝试把导航栏做成插件,但是遇到在插件组件中无法获取页面路由栈的问题,因此没有成功

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery 批量上传图片实现代码
Jan 28 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
在jquery中处理带有命名空间的XML数据
Jun 13 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
jQuery获取对象简单实现方法小结
Oct 30 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
C#程序员入门学习微信小程序的笔记
Mar 05 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
JavaScript实现图片合成下载的示例
Nov 19 Javascript
Node.js事件的正确使用方法
Apr 05 #Javascript
利用Node.js如何实现文件循环覆写
Apr 05 #Javascript
详解JavaScript栈内存与堆内存
Apr 04 #Javascript
jQuery中实现text()的方法
Apr 04 #jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 #jQuery
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 #Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 #Javascript
You might like
PHP实现网上点歌(二)
2006/10/09 PHP
PHP中iconv函数知识汇总
2015/07/02 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
Python实现队列的方法
2015/05/26 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
大专自我鉴定范文
2013/10/23 职场文书
大学生学业生涯规划
2014/01/05 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
小学生安全责任书
2014/07/25 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
罚站检讨书
2015/01/29 职场文书
西湖英语导游词
2015/02/06 职场文书
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android