uni-app開發(fā)小程序中scroll-view的高度設置為剩余可用高度的方法

創(chuàng)軟小程序開發(fā)團隊在使用的是uni-app的前端框架開發(fā)小程序時，由于屏幕需要剩余部分用滾動效果，即：用scorll-view自動填滿屏幕上剩下的高度。經過資料查找及實驗，總結方法如下。

scroll-view的高度自適應思路

1，使用uni.getSystemInfo(OBJECT)API接口獲取設備屏幕高度；

2，使用uni.createSelectorQuery()獲取元素到屏幕頂部的距離；

3，將屏幕高度減去元素到屏幕頂部的距離，即為可用高度（可能會存在底部bar，具體應用根據實際情況相結合）。

scroll-view的高度自適應實現過程（只包含部分需用代碼，具體請結合實際的小程序開發(fā)項目）：

頁面部分的代碼

// scroll-view的代碼 class名為scrollClass，通過該名稱獲取元素到屏幕頂部的距離；使用:style動態(tài)綁定高度。
<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()
			}
		})
		
		
	},