1. HTTP3W博客首页
  2. 技术
  3. vue

uniapp设备屏幕高度适配

1、获取设备屏幕可用总高度

uni.getSystemInfo({
    success: function (res) {
		var windowHeight= res.windowHeight;				
    }
});

2、绑定计算属性

computed: {		   
    scrollerHeight: function() {					
		return this.scrollHeight+'px';
    }	
},		

首先注意,不能绑定data属性,要绑定计算属性;scrollHeight代表多个变量计算后的最终结果,由computed监控。

computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;

computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化

3、使用

:style="{height:scrollerHeight}

案例:简单实现过程

export default {
		data() {
			return {
				vHeight:41,
				vtop:20
			}
		},
		created() {
			let this_ = this;
			uni.getSystemInfo({
			    success: function (res) {
					var windowHeight= res.windowHeight;			
					if(windowHeight > 736){
						this_.vHeight = 50;
						this_.vtop = 50;
					}else{
						this_.vtop = 20;
						this_.vHeight = 41;
					}
			    }
			});

		  this.wxqrcode();
		},
<image class="canvas"  :src="qcCode" :style="{'bottom':vHeight+'%'}  "></image>

1、原创文章,作者:诺米,如若转载,请注明出处:https://www.http3w.com/archives/688

2、本站内容若有雷同从属巧合,若侵犯了您的权益,请联系本站删除,E-mail: wtao219@qq.com

发表评论

您的电子邮箱地址不会被公开。

联系我们

254007489

在线咨询:点击这里给我发消息

邮件:wtao219@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息