小程序自定义导航栏适配 完美解决内容上下不居中问题

网友投稿 1547 2022-10-13

小程序自定义导航栏适配 完美解决内容上下不居中问题

小程序自定义导航栏适配 完美解决内容上下不居中问题

小程序组件 navigation-bar

小程序自定义导航栏适配 完美解决内容上下不居中问题

Navigation

Navigation 是小程序的顶部导航组件,当页面配置 navigationStyle 设置为 custom 的时候可以使用此组件替代原生导航栏

引入组件

方式一 (建议)

npm install miniprograms-navigation-bar --save

{ "usingComponents": { "navBar": "miniprograms-navigation-bar" }}

备注:如发现一些编译问题,请重启开发工具试试

方式二

复制代码过去,在 page.json 中引入组件,注意引入的路径

{ "usingComponents": { "navBar": "/components/index" }}

示例代码

属性列表

注:backgroundColorTop见 issue 问题

Slot

名称描述
left左侧 slot,在 back 按钮位置显示,当 back 为 false 的时候有效
center标题 slot,在标题位置显示,当 title 为空的时候有效
right在导航的右侧显示

注意

iconTheme 设置为 white 的时候,一定要记得自己去 json 文件设置"navigationBarTextStyle": "white"跳转搜索页面,在 Android 机子会出现文字被键盘弹起顶出 input 框,解决方案页面设置一个死的高度不要高于 windowHeight - navheight 例子中是设置 500pxinput 框文字抖动问题我是借鉴别人写的,可以最大限度减小文字抖动的大小,提升用户体验title searchBar slot="right" 如果全部有内容,是这样的先后显示顺序.默认配置满足不了功能的,请使用 slot 功能,见例子 1 6 7由于本人精力有限,只测试了常规的 20 多款手机.如有哪种机型出现问题,请备注机型和小程序版本库.本人会以最快方式解决问题.有什么 bug 和建议,还有功能上的问题请提 pr

后续

其他功能,规划中,或者留言联系方式微信 zhijunxh还需要其他样子的例子请留言,如果功能比较重要和主流的话,我会考虑第一时间添加

备注

渐变和动态修改背景色请参考例子 10,ios 机子会出现滚动渐变颜色加载出来不能消失的问题,暂时没想到解决办法,这是微信浏览器渲染的问题,社区里面相关问题地址getMenuButtonBoundingClientRect 胶囊按钮信息获取不到或者此方法报错问题已修复 获取菜单报错,需要捕捉异常和兼容版本导航栏渲染不出来

测试信息

手机型号胶囊位置信息statusBarHeight测试情况
iPhoneX80 32 281 369 48 8844通过
iPhone8 plus56 32 320 408 24 8820通过
iphone756 32 281 368 24 8720通过
iPhone6 plus56 32 320 408 24 8820通过
iPhone656 32 281 368 24 8720通过
HUAWEI SLA-AL0064 32 254 350 32 9624通过
HUAWEI VTR-AL0064 32 254 350 32 9624通过
HUAWEI EVA-AL0064 32 254 350 32 9624通过
HUAWEI EML-AL0068 32 254 350 36 9629通过
HUAWEI VOG-AL0065 32 254 350 33 9625通过
HUAWEI ATU-TL1064 32 254 350 32 9624通过
HUAWEI SMARTISAN OS10564 32 326 422 32 9624通过
XIAOMI MI659 28 265 352 31 8723通过
XIAOMI MI4LTE60 32 254 350 28 9620通过
XIAOMI MIX374 32 287 383 42 9635通过
REDMI NOTE364 32 254 350 32 9624通过
REDMI NOTE464 32 254 350 32 9624通过
REDMI NOTE355 28 255 351 27 9620通过
REDMI 5plus67 32 287 383 35 9628通过
MEIZU M571C65 32 254 350 33 9625通过
MEIZU M6 NOTE62 32 254 350 30 9622通过
MEIZU MX4 PRO62 32 278 374 30 9622通过
OPPO A3365 32 254 350 33 9626通过
OPPO R1158 32 254 350 26 9618通过
VIVO Y5564 32 254 350 32 9624通过
HONOR BLN-AL2064 32 254 350 32 9624通过
HONOR NEM-AL1059 28 265 352 31 8724通过
HONOR BND-AL1064 32 254 350 32 9624通过
HONOR duk-al2064 32 254 350 32 9624通过
SAMSUNG SM-G955064 32 305 401 32 9624通过
360 1801-A0164 32 254 350 32 9624通过

~ 创作不易,如果对你有帮助,请给个星星 star ✨ ✨ 谢谢 ~

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:mapstruct的用法之qualifiedByName示例详解
下一篇:我用YOLOv5做情感识别!
相关文章

 发表评论

暂时没有评论,来抢沙发吧~