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、所有文章未经授权禁止转载、摘编、复制或建立镜像,如有违反,追究法律责任。
2、本站文章部分来源注册用户发布或互联网收集而来,若有侵权,请邮件联系作者。
邮箱地址:wtao219@qq.com
THE END
分享
二维码
< <上一篇
下一篇>>