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 ;
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值