-
条件
- weex页面要通知app端是否显示原生导航栏(android,ios)和沉浸式导航(android)
- 要根据系统状态栏高度动态设置最顶端布局的height和margin
- app需要提供系统状态栏高度。android还需要设置FLAG_TRANSLUCENT_STATUS并且考虑api19以下的情况
-
直接上主要代码
- 通过进入weex页面的参数来通知app端相关状态
this.$jump('vip/center', { translucentStatus: true, navigationBarHidden: true, ... });
- 根据app返回的状态栏高度调整响应的界面
weex.requireModule('common').getStatusBarHeight(function(statusBarHeight) { me.statusBarHeight = statusBarHeight * 2; });
<image class="top_bg" :style="{ height: (420 + statusBarHeight) + 'px' }" src="..." /> ...
- 通过WXModule提供getStatusBarHeight()
- android端需要针对api19以下做处理
@JSMethod(uiThread = true) public void getStatusBarHeight(final JSCallback jsCallback) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { jsCallback.invokeAndKeepAlive(UiUtil.px2dip(mWXSDKInstance.getContext(),UiUtil.getStatusBarHeight(mWXSDKInstance.getContext()))); }else { jsCallback.invokeAndKeepAlive(0); } }
-
效果
image -
扩展
也可以访问我的个人博客:http://blog.yzapp.cn
github:https://github.com/nesror
weex沉浸式导航栏解决方案
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。