小程序自定义导航栏 完美解决上下不居中 左右不对称

2019-08-16 admin

背景

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

  • Android、IOS手机对于页面title的展示不一致,安卓title的显示不居中
  • 页面的title只支持纯文本级别的样式控制,不能够做更丰富的title效果
  • 左上角的事件无法监听、定制
  • 路由导航单一,只能够返回上一页,深层级页面的返回不够友好

探索

小程序自定义导航栏已开放许久>>了解一下,相信不少小伙伴已使用过这个功能,同时不少小伙伴也会发现一些坑:

  • 机型多如牛毛:自定义导航栏高度在不同机型始终无法达到视觉上的统一
  • 调皮的胶囊按钮:导航栏元素(文字,图标等)怎么也对不齐那该死的胶囊按钮
  • 各种尺寸的全面屏,奇怪的刘海屏,简直要抓狂

一探究竟

为了搞明白原理,我先去翻了官方文档,>>飞机,点过去是不是很惊喜,很意外,通篇大文尽然只有最下方的一张图片与这个问题有关,并且啥也看不清,汗汗汗…

我特意找了一张图片来 小程序导航栏 分析上图,我得到如下信息:

  • Android跟iOS有差异,表现在顶部到胶囊按钮之间的距离差了6pt
  • 胶囊按钮高度为32pt, iOS和Android一致

接着分析

  • 胶囊按钮到状态栏下边缘这块距离,好像是固定的?
  • 安卓这个图,好像有点奇怪?导航栏分为 状态栏+标题栏?
  • 如果前两个条件成立,那我们的问题是不是就解决了80%?

第一个问题

很简单,我们写一个状态栏,通过wx.getSystemInfoSync().statusBarHeight设置高度, 为了好测量,我们设置状态栏背景色为深色

Android: Android iOS: iOS

可以看出,iOS胶囊按钮与状态栏之间距离为:6px, Android为8px,并且经过测量,iOS各机型,Android各机型结果一致(有兴趣的可以自行测量)

第二个问题

导航栏分为 状态栏+标题栏?

通过对第一个问题的论证,很明显能看出来确实是这样的。并且通过第一个问题的测量结果以及官方提供的数据,我们可以对标题栏高度进行计算:

  • 导航栏高度 = 胶囊按钮高度 + 状态栏到胶囊按钮间距 * 2
  • Android导航栏高度 = 32px + 8px * 2 = 48px
  • iOS导航栏高度 = 32px + 6px * 2 = 44px

*注:由于胶囊按钮是原生组件,为表现一致,其单位在各种手机中都为px,所以我们自定义导航栏的单位都必需是px(切记不能用rpx),才能完美适配。

解决问题

利用胶囊按钮的位置信息和statusBarHeight高度动态计算navbar的高度, 贴一个实现此功能重要的方法过程

let rect = Taro.getMenuButtonBoundingClientRect ? Taro.getMenuButtonBoundingClientRect() : null;
    Taro.getMenuButtonBoundingClientRect();
    let navBarHeight = (function() {
      let gap = ''; //胶囊按钮上下间距 使导航内容居中
      if (systemInfo.platform === 'android') {
        gap = 8;
      } else if (systemInfo.platform === 'devtools') {
        if (ios) {
          gap = 5.5; //开发工具中ios手机
        } else {
          gap = 7.5; //开发工具中android和其他手机
        }
      } else {
        gap = 4;
      }
      return systemInfo.statusBarHeight + 2 * gap + rect.height;
    })();

gap信息就是用来确定不同的手机需要添加的间隙距离,具体实现和demo请移步下方代码仓库

吐槽

这么重要的问题,官方尽然没有提供解决方案…竟然提供了一张看不清的图片???

网上有很多ios设置44,android设置48,还有根据不同的手机型号设置不同高度,通过长时间的开发和尝试,本人发现以上方案并不完美

代码库

测试信息

手机型号 胶囊位置信息 statusBarHeight 测试情况
iPhone8 plus 56 32 320 408 24 88 24 通过
iphone7 56 32 281 368 24 87 20 通过
iPhone6 plus 56 32 320 408 24 88 20 通过
iPhone6 56 32 281 368 24 87 20 通过
HUAWEI SLA-AL00 64 32 254 350 32 96 24 通过
HUAWEI VTR-AL00 64 32 254 350 32 96 24 通过
HUAWEI EVA-AL00 64 32 254 350 32 96 24 通过
HUAWEI EML-AL00 68 32 254 350 36 96 29 通过
HUAWEI VOG-AL00 65 32 254 350 33 96 25 通过
HUAWEI SMARTISAN OS105 64 32 326 422 32 96 24 通过
XIAOMI MI6 59 28 265 352 31 87 未记录 通过
XIAOMI MI4LTE 60 32 254 350 28 96 20 通过
XIAOMI MIX3 74 32 287 383 42 96 20 通过
REDMI NOTE3 64 32 254 350 32 96 20 通过
REDMI NOTE4 64 32 254 350 32 96 24 通过
REDMI NOTE3 55 28 255 351 27 96 20 通过
MEIZU M571C 65 32 254 350 33 96 25 通过
MEIZU M6 NOTE 62 32 254 350 30 96 22 通过
MEIZU MX4 PRO 62 32 278 374 30 96 22 通过
OPPO A33 65 32 254 350 33 96 26 通过
VIVO Y55 64 32 254 350 32 96 24 通过
HONOR BLN-AL20 64 32 254 350 32 96 24 通过
HONOR NEM-AL10 59 28 265 352 31 87 24 通过

  • 本文章并无任何商业性质,如有侵权请联系本人修改或删除
  • 文章部分内容是本人查询搜集而来,代码都是本人所写
  • 上述测试信息是taro组件测试信息,近期增加小程序原生组件测试信息
  • 如有问题可以下方留言讨论,或者仓库提pr

比较

斗鱼: 斗鱼

微博: 微博

酷狗: 酷狗

知乎: 知乎

知乎是这里边做的最好的,但是我个人认为有几个可以优化的小问题

  • 导航栏下边距太小,看起来不舒服
  • 搜索框距离2侧按钮组距离不对等
  • 自定义返回和home按钮中的竖线颜色重了,并且感觉太粗
  • 如果您看到了此篇文章,请赶快修改自己的代码,并可运用在实践中

扫码体验我的小程序: 垃圾分类

创作不易,如果对你有帮助,请移步Taro组件gitHub原生组件gitHub给个星星 star✨✨ 谢谢

[转载]原文链接:https://segmentfault.com/a/1190000020091334

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72676.html

文章标题:小程序自定义导航栏 完美解决上下不居中 左右不对称

相关文章
js实现鼠标左右移动,图片也跟着移动效果
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距离越大。 思路:首先获取图片原先的距离。设置一个变化值,图片的最终距离等于原先的距离加上变化值 布局:大盒子里面是图片,大盒子position:relative;图...
2017-02-17
ASP.NET 2.0 AJAX应用程序设计
ASP.NET Aiax技术是一种实现异步(Asynchronous)网络应用的技术,它被整合在ASP.NET 2.0之中,是As P.NET的一种扩展技术。通过ASENETAjax技术,开发人员或程序员可以将Web服务器控件和客户端脚本结...
2015-11-14
Node.js的不足之处
跨平台编程能力不够强大 Bowery团队指出Go能很方便地在不同系统里进行程序编译,这是他们转入Go的重要原因之一。 作为开发平台,对Linux,Windows,OSX等常见操作系统提供支援是能否吸引开发者的基本要素。在Go中,开发者可以针...
2015-11-12
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
百度新功能【特效搜索】演示 惊呆了小伙伴
百度搜索最近又出新玩意新功能了,可能你还没有发现,名为【百度特效搜索】已经默默上线了,有什么效果呢? 在百度搜索中根据用户搜索的关键词来出发某些动作,例如笔者搜索“打雷”关键字,在搜索结果中你会听到有打雷声, 黑洞,闪烁、翻转、跳跃,打雷,...
2015-11-12
2014年,你是不是被这5个HTML5技术刷屏了?
如今,几乎每天都有HTML5页面的推广以及小游戏、小测试在微信上传播,用户也逐渐习惯被各种HTML5轰炸。那么在刚刚过去的一年究竟有哪些HTML5技术堪称火爆,让人们的微信频频被刷屏呢? 1、2048 2048 在4x4的棋盘上,用方向键选...
2015-11-12
7个你可能不认识的CSS单位
浼楁墍鍛ㄧ煡CSS鎶€鏈�鎴戜滑铏界劧寰堢啛鎮夛紝鍦ㄤ娇鐢ㄧ殑杩囩▼鍗村緢瀹规槗琚�鍥颁綇锛岃繖璁╂垜浠�鍦ㄦ柊闂�棰樺嚭鐜扮殑鏃跺€欏彉寰楀緢涓嶅埄銆� 闅忕潃web缁х画涓嶆柇鍦板彂灞曪紝瀵逛簬鏂版妧鏈�鏂拌В鍐虫柟妗堢殑瑕佹眰涔熶細涓...
2015-11-11
线程有什么用处? 为什么有些东西注定不会流行
多线程的领域也许只有一个: 图形学. 我们以一个游戏来说明 @ |___|___|___|___|___ @是一个玩家, 往前走, 每一个___是1米. 每当@走到1米的时候, 会绘制一个蘑菇*给玩家看. @|___*___|___|___...
2015-11-12
mpvue 小程序如何自定义tabBar,不使用navigateTo跳转,模拟redirectTo跳转
原生tabBar tabBar: { "list": [ { pagePath: "pages/index/main", iconPath: &...
2018-05-25
回到顶部