weex页面自定义导航栏组件

参考:Weex系列(1)-App端自定义导航条
最近也在对weex项目做iOS适配工作,发现小伙伴们对于导航栏这块都放在单个页面单独写的,只要有一个小问题,适配起来就比较蛋疼,于是将所有页面的导航栏剥离处理统一处理,借鉴上述文章内容做了一点小小的改动优化。
iOS除了新出的iPhone X导航条高度是88之外,其他设备都是64(我们的app最低支持iOS 9.0系统),而安卓的统一是45,所以先判断平台及设备。
weex屏幕默认宽高是750 * 1334,逻辑分辨率是375 * 667,导航条在css中设置的高度要乘以2
导航条的子控件有:左边图片、中间文字及右边图片或文字。
左边增加属性判断是返回按钮(点击执行pop方法)或者其他按钮

生成一个名叫 NavigationBar.vue 的文件 将下面的代码贴入







以上是内容单独卸载vue文件中如:NavigationBar.vue
在其它vue文件中使用的方法







你可能感兴趣的:(weex页面自定义导航栏组件)