WEEX-EEUI 页面的高度问题(页面高度设置为多少才对?)
16lz
2021-01-26
前言
最近在使用EEUI开发weex页面,遇到了一些坑,关于列表页面底部有按钮的页面布局问题提出了一个解决方案。
说明
正常使用weex开发页面过程中使用的是750进行页面布局的,这个尺寸是参考了IOS的屏幕尺寸进行设定的,android其实是没有这个分辨率的尺寸的,android有一个非常相近的屏幕分辨率那就是720*1280
那么既然android没有这个分辨率那怎么能做到严丝合缝呢?,所以在使用过程中,android的页面高度其实是一直在变化的,我们得找到750对饮的不同屏幕的设计高度。weex进行了等比例缩放。
举例说明一下:
小米6的设备,屏幕分辨率是1080*2248(包含状态栏和底部按键栏的高度)
1080/750=2248/X
那么此时如果我们想把页面占满的高度X=2248*750/1080=1561
我们可以拿1561在小米6设备上做一下简单的测试,写一个空白页面,然后把页面的高度用1561写死,并为页面添加背景色
<div style="background-color: red;" :style="{height:realPageHeight}">div>
我们可以适当的修改realPageHeight的高度,看看是不是正确,通过实践我们发现是ok的。
如何适配状态栏,原生标题栏,和底部按纽栏高度
通过上面我们对页面高度的计算,不难发现只要掌握每个屏幕750/屏幕宽度的系数就能搞定
再就是计算出不同设备的三个像素高度
于是我们可以使用以下代码来获得,关于设备的三个高度我是通过QMUI的工具类获得的。
1.修改weex sdk 初始化的地方
//屏幕真实高度 int screenHeight=QMUIDisplayHelper.getRealScreenSize(this)[1]; //屏幕真实宽度 int screenWidth=QMUIDisplayHelper.getRealScreenSize(this)[0]; //屏幕原生title高度 int pageTitleHeight=QMUIDisplayHelper.dp2px(this,60); //屏幕内容高度 int pageHeight=QMUIDisplayHelper.getScreenHeight(this); //屏幕状态栏高度 int statusBarHeight= QMUIDisplayHelper.getStatusBarHeight(this); //判断底部导航栏是否存在 boolean hasNav=screenHeight!=(pageHeight+statusBarHeight); //底部导航菜单栏高度 int NavMenuHeight=hasNav?QMUIDisplayHelper.getNavMenuHeight(this):0; WXSDKEngine.addCustomOptions("NavMenuHeight", String.valueOf(NavMenuHeight)); WXSDKEngine.addCustomOptions("statusBarHeight", String.valueOf(statusBarHeight)); WXSDKEngine.addCustomOptions("pageHeight", String.valueOf(pageHeight)); WXSDKEngine.addCustomOptions("pageTitleHeight", String.valueOf(pageTitleHeight)); WXSDKEngine.addCustomOptions("deviceWidth", String.valueOf(screenWidth)); WXSDKEngine.addCustomOptions("deviceHeight", String.valueOf(screenHeight));
2.在weex写一个通用方法来获取你需要的代码高度
/** * * 获取页面除去title高度后的高度 */ getPageContentHeight(){ const { env } = weex.config; console.log('height:'+env.deviceHeight+'width:'+env.deviceWidth+'pageTitleHeight:'+this.getTitleHeight()+'NavMenuHeight:'+env.NavMenuHeight+'statusBarHeight:'+env.statusBarHeight+'pageHeight:'+env.pageHeight) const xishu=750/env.deviceWidth; const realDesignHeight=env.deviceHeight*xishu; const realNavMenuHeight=env.NavMenuHeight*xishu; const realstatusBarHeight=env.statusBarHeight*xishu; const realpageTitleHeight=env.pageTitleHeight*xishu; console.log('realDesignHeight:'+realDesignHeight+'realNavMenuHeight:'+realNavMenuHeight+'realstatusBarHeight:'+realstatusBarHeight+'realpageTitleHeight:'+realpageTitleHeight) return realDesignHeight-realNavMenuHeight-realstatusBarHeight-realpageTitleHeight; },
结束语
写到最后,其实还有一个问题,关于设置了系统全面屏和非全面屏页面设计高度变化的问题,有知道的小伙伴请在留言区写一下,分享一下经验,谢谢
更多相关文章
- android屏幕横向滚动,android图片横向滚动
- android——dip与屏幕density无关的解读
- Android之解决全屏切换非全屏的页面压缩问题
- Android基础入门教程——7.1.2 Android(安卓)Http请求头与响应头
- 精确适配不同的dpi和屏幕尺寸
- 1与2(CSS与HTML).1—— 一个比较通用的网站主页面
- Android让VideoView填充满屏幕/父布局并保证不变形
- Launcher功能的修改及添加,本篇是一些小功能的展示,通知栏显隐,dock
- 防止Android过快点击造成多次事件的三种方法