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

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

小程序组件 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

注意

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 胶囊按钮信息获取不到或者此方法报错问题已修复 获取菜单报错，需要捕捉异常和兼容版本导航栏渲染不出来

测试信息

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

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