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>