Weex手机平板屏幕高度的自适应
entry.js的相关填写代码://realHeight 是屏幕真正的高,750是设计页面时使用的高度为750px,自行修改Vue.prototype.deviceWidth = weex.config.env.deviceWidth;Vue.prototype.deviceHeight = weex.config.env.deviceHeight;Vue.prototype.realH...
·
流程是这样的:先在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 ;
更多推荐
已为社区贡献5条内容
所有评论(0)