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


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 相关文章推荐
flash javascript之间的通讯方法小结
Dec 20 Javascript
javascript中的继承实例代码
Apr 27 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
微信小程序 checkbox使用实例解析
Sep 09 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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
使用 MySQL Date/Time 类型
2008/03/26 PHP
php 表单数据的获取代码
2009/03/10 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
jquery与js实现全选功能的区别
2017/06/11 jQuery
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
Python MD5文件生成码
2009/01/12 Python
python黑魔法之参数传递
2016/02/12 Python
Python的requests网络编程包使用教程
2016/07/11 Python
Python实现定时任务
2017/02/08 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
优秀学生干部个人的自我评价
2013/10/04 职场文书
校园报刊亭的创业计划书
2014/01/02 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
销售员自我评价
2015/03/11 职场文书
收入证明申请书
2015/06/12 职场文书
mysql 生成连续日期及变量赋值
2022/03/20 MySQL
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技