uni-app开发小程序中scroll-view的高度设置为剩余可用高度的方法

创软小程序开发团队在使用的是uni-app的前端框架开发小程序时，由于屏幕需要剩余部分用滚动效果，即：用scorll-view自动填满屏幕上剩下的高度。经过资料查找及实验，总结方法如下。

scroll-view的高度自适应思路

1，使用uni.getSystemInfo(OBJECT)API接口获取设备屏幕高度；

2，使用uni.createSelectorQuery()获取元素到屏幕顶部的距离；

3，将屏幕高度减去元素到屏幕顶部的距离，即为可用高度（可能会存在底部bar，具体应用根据实际情况相结合）。

scroll-view的高度自适应实现过程（只包含部分需用代码，具体请结合实际的小程序开发项目）：

页面部分的代码

// scroll-view的代码 class名为scrollClass，通过该名称获取元素到屏幕顶部的距离；使用:style动态绑定高度。
<scroll-view scroll-y="true" class="scrollClass" :style="{height:scrollHeight+'px'}">
	//此处省略滚动内部的代码
</scroll-view>

JS部分代码

// data部分的代码
data() {
	return {
		scrollHeight:0, //元素的所需高度
	}
},

//onReady部分代码（以下代码只能放到 onReady）

	onReady() {
		let _this = this;
		
		uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
			success(res) { //成功回调函数
				let wHeight=res.windowHeight //windoHeight为窗口高度，主要使用的是这个
				let titleH=uni.createSelectorQuery().select(".scrollView"); //想要获取高度的元素名（class/id）
				titleH.boundingClientRect(data=>{
					_this.scrollHeight=wHeight-data.top  //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
				}).exec()
			}
		})
		
		
	},