流程是这样的:先在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 ;
Logo

前往低代码交流专区

更多推荐