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


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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 Javascript
vuex管理状态仓库使用详解
Jul 29 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
SSI指令
2006/11/25 PHP
一个自定义位数的php多用户计数器代码
2007/03/11 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
详解python中的装饰器
2018/07/10 Python
python Tcp协议发送和接收信息的例子
2019/07/22 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
单位在职证明范本
2014/01/09 职场文书
拾金不昧的表扬信
2014/01/16 职场文书
信息总监管理职责范本
2014/03/08 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
假释思想汇报范文
2014/10/11 职场文书
税务会计岗位职责
2015/04/02 职场文书
师范生见习总结范文
2015/06/23 职场文书
小学班主任教育随笔
2015/08/15 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
基于tensorflow权重文件的解读
2021/05/26 Python
MySQL连接控制插件介绍
2021/09/25 MySQL
阿里云日志过滤器配置日志服务
2022/04/09 Servers