WEEX-EEUI 页面的高度问题(页面高度设置为多少才对?)

本文探讨了在使用EEUI开发WEEX页面时遇到的布局问题,特别是针对有状态栏、原生标题栏和底部按钮栏的页面高度适配。作者通过等比例缩放方法,找到不同屏幕设计高度,以实现页面占满效果。通过计算750对应不同设备的系数,可以获取设备的状态栏、标题栏和底部按钮栏的高度,进而完成高度适配。
摘要由CSDN通过智能技术生成

前言

最近在使用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)[
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值