uni-app爬坑实录十二：自适应不同尺寸屏幕。

APP应用开发过程，屏幕的尺寸，一直都是布局比较头疼的问题。uni-app使用的upx是相对单位，水平布局比较好处理。而手机的屏幕长宽比差异比较多，垂直布局就比较麻烦。

---

如图中布局，使用upx单位在屏幕1中显示正常，换了一个屏幕就产生了一条间隙。

---

---

解决思路：

同样以上图的布局为例

A、B两个区域的可以固定高度，然后C区域根据不同的屏幕尺寸调整它的高度，就可以实现，不同尺寸屏幕的自适应。

程序中需要：
1、获取设备可用屏幕总高度。
3、获取固定区域的高度
2、动态调整高度的元素，height属性绑定变量。

---

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

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

二、获取固定区域的高度

//这里固定高度，是参考输入框高度的5倍
let view = uni.createSelectorQuery().select(".option");		
	view.boundingClientRect(data => {								
		let fixedHeight = data.height * 5;
		this.scrollHeight = windowHeight - fixedHeight ;
}).exec();		

三、height属性绑定变量。

首先注意，不能绑定data属性，要绑定计算属性

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

样式height属性绑定计算属性。

:style="{height:scrollerHeight}