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


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 相关文章推荐
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
javascript jscroll模拟html元素滚动条
Dec 18 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 Javascript
如何利用javascript接收json信息并进行处理
Aug 06 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
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字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
javascript 学习之旅 (2)
2009/02/05 Javascript
javascript 精粹笔记
2010/05/09 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
Python使用gensim计算文档相似性
2016/04/10 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
优秀班集体获奖感言
2014/02/03 职场文书
班组拓展活动方案
2014/08/14 职场文书
六一儿童节活动总结
2014/08/27 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB