taro 请务必在小程序页面中完善页面基础信息_小程序自定义导航栏(完美适配所有手机)...
背景
在做小程序时,关于默认导航栏,我们遇到了以下的问题:
- Android、IOS手机对于页面title的展示不一致,安卓title的显示不居中
- 页面的title只支持纯文本级别的样式控制,不能够做更丰富的title效果
- 左上角的事件无法监听、定制
- 路由导航单一,只能够返回上一页,深层级页面的返回不够友好
探索
小程序自定义导航栏已开放许久>>了解一下,相信不少小伙伴已使用过这个功能,同时不少小伙伴也会发现一些坑:
- 机型多如牛毛:自定义导航栏高度在不同机型始终无法达到视觉上的统一
- 导航栏中内容怎么都不垂直居中对齐,更别说适配所有手机
- 调皮的胶囊按钮:导航栏元素(文字,图标等)怎么也对不齐那该死的胶囊按钮
- 各种尺寸的全面屏,奇怪的刘海屏,简直要抓狂
一探究竟
为了搞明白原理,我先去翻了官方文档,>>飞机,点过去是不是很惊喜,很意外,通篇大文尽然只有最下方的一张图片与这个问题有关,并且啥也看不清,汗汗汗...
我特意找了一张图片来
分析上图,我得到如下信息:
- Android跟iOS有差异,表现在顶部到胶囊按钮之间的距离差了6pt
- 胶囊按钮高度为32pt, iOS和Android一致
动手分析
我们写一个状态栏,通过wx.getSystemInfoSync().statusBarHeight设置高度
Android:
iOS:
可以看出,iOS胶囊按钮与状态栏之间距离为:4px, Android为8px,是不是所有手机都是这种情况呢? 答案是:苹果手机确实都是4px,安卓大部分都是7和8 也会有其他的情况(可以自己打印getSystemInfo验证)如何快速便捷算出这个高度,请接着往下看
如何计算
导航栏分为状态栏和标题栏,只要能算出每台手机的导航栏高度问题就迎刃而解
- 导航栏高度 = 胶囊按钮高度 + 状态栏到胶囊按钮间距 * 2 + 状态栏高度
注:由于胶囊按钮是原生组件,为表现一致,其单位在各种手机中都为px,所以我们自定义导航栏的单位都必需是px(切记不能用rpx),才能完美适配。
解决问题
现在我们明白了原理,可以利用胶囊按钮的位置信息和statusBarHeight高度动态计算导航栏的高度,贴一个实现此功能最重要的方法
let
gap信息就是不同的手机其状态栏到胶囊按钮间距,具体更多代码实现和使用demo请移步下方代码仓库,代码中还会有输入框文字跳动解决办法,安卓手机输入框文字飞出解决办法,左侧按钮边框太粗解决办法等等
吐槽
这么重要的问题,官方尽然没有提供解决方案...竟然提供了一张看不清的图片???
网上有很多ios设置44,android设置48,还有根据不同的手机型号设置不同高度,通过长时间的开发和尝试,本人发现以上方案并不完美,并且bug很多
代码库
- Taro组件gitHub地址详细用法请参考README
- 原生组件npm构建版本gitHub地址详细用法请参考README
- 原生组件简易版gitHub地址详细用法请参考README
- 由于本人精力有限,目前只计划发布维护好这2种组件,其他组件请自行修改代码,有问题请联系
备注
- 上方2种组件在最下方30多款手机测试情况表现良好
- iPhone手机打电话和开热点导致导航栏样式错乱,问题已经解决啦,请去demo里测试,这里特别感谢moments网友提出的问题
- 本文章并无任何商业性质,如有侵权请联系本人修改或删除
- 文章少量部分内容是本人查询搜集而来
- 如有问题可以下方留言讨论,微信zhijunxh
比较
斗鱼:
虎牙:
微博:
酷狗:
知乎:
知乎是这里边做的最好的,但是我个人认为有几个可以优化的小问题
- 打电话或者开启热点导致样式错落,这也是大部门小程序的问题
- 导航栏下边距太小,看起来不舒服
- 搜索框距离2侧按钮组距离不对等
- 自定义返回和home按钮中的竖线颜色重了,并且感觉太粗
如果您看到了此篇文章,请赶快修改自己的代码,并运用在实践中吧
扫码体验我的小程序:
创作不易,如果对你有帮助,请移步Taro组件gitHub原生组件gitHub给个星星 star✨✨ 谢谢
测试信息
| 手机型号 | 胶囊位置信息 | statusBarHeight | 测试情况 | | ---------------------- | ------------------- | :-------------: | -------- | | iPhoneX | 80 32 281 369 48 88 | 44 | 通过 | | iPhone8 plus | 56 32 320 408 24 88 | 20 | 通过 | | 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 ATU-TL10 | 64 32 254 350 32 96 | 24 | 通过 | | HUAWEI SMARTISAN OS105 | 64 32 326 422 32 96 | 24 | 通过 | | XIAOMI MI6 | 59 28 265 352 31 87 | 23 | 通过 | | XIAOMI MI4LTE | 60 32 254 350 28 96 | 20 | 通过 | | XIAOMI MIX3 | 74 32 287 383 42 96 | 35 | 通过 | | REDMI NOTE3 | 64 32 254 350 32 96 | 24 | 通过 | | REDMI NOTE4 | 64 32 254 350 32 96 | 24 | 通过 | | REDMI NOTE3 | 55 28 255 351 27 96 | 20 | 通过 | | REDMI 5plus | 67 32 287 383 35 96 | 28 | 通过 | | 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 | 通过 | | OPPO R11 | 58 32 254 350 26 96 | 18 | 通过 | | 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 | 通过 | | HONOR BND-AL10 | 64 32 254 350 32 96 | 24 | 通过 | | HONOR duk-al20 | 64 32 254 350 32 96 | 24 | 通过 | | SAMSUNG SM-G9550 | 64 32 305 401 32 96 | 24 | 通过 | | 360 1801-A01 | 64 32 254 350 32 96 | 24 | 通过 |
taro 请务必在小程序页面中完善页面基础信息_小程序自定义导航栏(完美适配所有手机)...相关推荐
- 小程序自定义导航栏(适配不同手机)——拿来就用
基本思路 写自定义导航组件的时候,需要将组件结构一分为二:状态栏 + 标题栏状态栏高度可通过wx.getSystemInfoSync().statusBarHeight获取标题栏高度:安卓:48px, ...
- 微信小程序自定义导航栏完整适配方案
写这篇博客的背景 临近节日,产品想给小程序首页头部设置图片背景,这个只能自定义导航栏来实现 当然除了自定义背景图,还可以放置其他组件,按钮.搜索框等 实践部分设备状态栏.胶囊.间距的高度(仅供参考)( ...
- 微信小程序自定义导航栏兼容适配所有机型
目前小程序已在前端占了一席之地,最近公司项目上用的就是小程序开发,由于功能及页面不是很多,所以直接原生开发,毕竟坑可能会少点,在开发过程中,小程序自带导航栏和客户的设计稿导航栏排在一起,感觉很别扭,因 ...
- 微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配
自定义微信小程序头部导航栏 自定义微信小程序头部导航栏,有几种方式 方式一 {"navigationStyle": "custom" // 将navigatio ...
- 【小程序自定义组件,冒泡,自定义导航栏,页面栈】
自定义组件 在根目录新建一个components的文件夹----新建一个文件夹post----新建一个compont文件也叫post 创建完之后 post.json就自动配置好了 {"com ...
- 微信小程序页面栈_微信小程序开发中的页面栈及页面路由原理
摘要:小程序的开发方兴未艾,本文以图解的形式详细剖析了小程序开发中的页面栈及页面路由原理,对于该原理的深入理解有助于开发者更好地理解小程序的开发框架,更好地开发出功能强大的小程序. 微信小程序(以下简 ...
- Taro编译微信小程序实现顶部自定义导航栏
[需求] 使用taro开发微信小程序的过程中,涉及到小程序的需要自定义顶部导航栏(导航栏渐变色),微信小程序中只能够设置固定的颜色,渐变颜色以及添加其他按钮的操作就不能够通过小程序自带的api来实现 ...
- 微信小程序-自定义导航栏及返回上一级页面的实现
一.参考文章 1.微信小程序自定义navigationBar 2.微信小程序返回上一级页面的实现代码 3.小程序开发--常用布局 二.需求 在导航栏中需要显示信息的"未读数量",所 ...
- 微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况
背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中 页面的title只支持纯文本级别的样式控制,不能够做更 ...
最新文章
- 九零后的五年七次工作经历
- 4. matlab 中的axis与axes的区别
- Winform程序只允许应用单开
- 重磅发布:阿里开源 OpenJDK 长期支持版本 Alibaba Dragonwell
- 程维谈智慧交通:我们赶上好时代 走出了自己路
- Python程序的执行过程
- byte数组存的是什么_字节跳动为什么有字节2个字,因为程序的真谛:字节
- [转载] Python Dictionary用法小结
- 打包外星人_《疯狂外星人》中外星人带上金箍就是大圣,放下金箍就是至尊宝!...
- 第四季-专题20-SPI驱动程序设计
- itunes store服务中断_从服务器开发底层聊一聊协程的实现原理
- java比python快多少倍_java为什么比python快
- python ppt自动生成_用Python自动生成快闪文字视频
- BSText - YY大神的富文本框架 YYText 的 Swift 版本
- 国产手机企业在IOT行业展开混战,华为增长势头凶猛
- Python最吃香的5个就业方向,薪资收入也非常可观!
- Python自学笔记11:实操案例八(咖啡馆、2019中超联赛前五,模拟手机通讯录)
- 在android tegra2中添加一个camera
- STM32F103高级定时器死区时间的计算
- 图像处理+机器学习相关资源整合
热门文章
- Arduino驱动APDS-9960传感器颜色识别
- 以太坊源码分析(53)以太坊测试网络Clique_PoA介绍
- 英语字母c的语言教案,[小班英语教案认识字母]幼儿园小班英语教案:字母C.doc...
- python可以连续赋值吗_Python连续赋值的两个要点
- 和姜昆平起平坐,任北京曲艺团副团长,李菁离开德云社进入主流界
- 转型科技狂的安踏 要用“赢领计划”抄底NIKE?
- 安庆师范大学c语言程序设计,安庆c语言编程学习,安庆学c语言编程培训,安庆学c语言编程一般能拿多少工资...
- FreeCAD源码分析:FreeCADGui模块
- 使用QTP软件对飞机票订票系统进行测试
- 获取系统中已经安装的文字输入法