uni-app爬坑实录十二：自适应不同比例的屏幕。

移动端APP应用中，不同设备屏幕长宽比存在差异。因此有些固定高度的页面，在不同设备就会产生不同的显示效果。

比如图中左边布局正常，更换了一个比例不同的屏幕，显示就产生了一条间隙。

解决思路：AB和CD两个区域的可以固定高度，然后BC区域根据不同的屏幕尺寸调整它的高度，即可实现不同尺寸屏幕的自适应。

那么程序需要做的：
1、获取设备可用屏幕总高度。
3、获取固定区域的高度
2、滚动框height属性绑定变量。

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

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

二、获取固定区域的高度,通过参照元素的位置信息,来计算C区域的高度

var _this = this;
var diffHeight = 0;
	let view = uni.createSelectorQuery().select("#scrollbody");
	view.boundingClientRect(data => {						
		diffHeight = data.top ;				//C区域上延到屏幕顶端的距离，即A区域的高度			
		view = uni.createSelectorQuery().select("#tfloor1");
		view.boundingClientRect(data => {								
			diffHeight += data.height ;		//B区域的高度												
			_this.tableheight = _this.GLOBAL.screenHeight - diffHeight;	
			//可以屏幕总高度 - C区域上延到屏幕顶端的距离 - B区域的高度 
			//即获得C区域要调整的高度											
		}).exec();															
	}).exec();				

附：boundingClientRect获取元素的相关属性：

三、height属性绑定变量。

将获取的C区域高度，绑定到template样式。
首先注意，不能绑定data属性，要绑定计算属性

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

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

:style="{height:scrollerHeight}