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

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

网友投稿 1389 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	测试情况
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	通过

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

微信小程序组件 action-sheet 显示操作菜单解读与分析

1389 2022-10-13

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

微信小程序组件 action-sheet 显示操作菜单解读与分析

小程序开发指南 - 一步一步学会开发小程序

小程序组件化开发：解锁更高效、可维护的小程序开发之路

最近发表

更多内容

小程序SDK

Finclip技术文档

小程序开发

小程序容器

小程序框架

Finclip小程序平台

Finclip用户投稿

车联网

推荐文章

小程序SDK是什么意思？小程序sdk和插件有什么区别？

小程序支付功能怎么实现？

企业app开发流程是什么？

app运营模式有哪些？

小程序多端引流怎么做？

小程序生态分析的机会和威胁

Flutter入门这一篇效率文章就够了

原生与跨平台解决方案分析,跨平台软件开发技术方案

热更新技术：让软件更新变得更加轻松快速

解决方案

银行解决方案

证券解决方案

互联网解决方案

政企OA解决方案

科技解决方案

loT解决方案

信任解决方案

热评文章

AppCan:基于混合模式的移动应用开发,移动混合模

Hybrid App混合模式开发的了解

小程序容器技术助力券商数字营销突围，小程序容器化的意

用mpvue开发微信小程序基础知识（vue.js开发

小程序多端框架全面测评对比，强烈推荐！

开放银行银行案例，迎接金融创新的未来

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

最近发表

更多内容

推荐文章

解决方案

热评文章

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