Weex手机平板屏幕高度的自适应

平板屏幕高度的自适应"/>

Weex手机平板屏幕高度的自适应

流程是这样的：先在entry.js中计算屏幕的真实高度realHeight并抛给全局，然后在需要适用的页面的js生命周期中用this.realHeight拿到屏幕高度并更新到data()中，然后就可以用双向数据绑定到html中从而实现自适应。

entry.js的相关填写

代码：
//realHeight 是屏幕真正的高，750是设计页面时使用的高度为750px（官方貌似默认是按750来着）。
Vue.prototype.deviceWidth = weex.config.env.deviceWidth;
Vue.prototype.deviceHeight = weex.config.env.deviceHeight;
Vue.prototype.realHeight = weex.config.env.deviceHeight / weex.config.env.deviceWidth * 750;

JS里的用法

data自定义高的名字，这100px可以随便写，因为在下面方法中会覆盖

我写在了mounted() 方法，写在created()方法好像也行，加了1px是因为整个背景有颜色时你会发现底部有一条缝，大概是div边框占了1px，要不要都行。

var me = this;
me.left_height = parseInt(me.realHeight) + 1;

CSS里的用法

 代码：<div :style="{ height: this.left_height + 'px' }"><div>

以此类推悬浮窗也可以自适应宽高

要窗口在屏幕的正中间计算它的高度：（真正的高度-窗口的高度）/ 2

CSS：<div :style="{ top: this.top_height + 'px' }"><div>
JS：var  top_height :100;var me = this;me.top_height= (parseInt(me.realHeight)-悬浮窗高度)/ 2 ;