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

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

scroll-view的高度自適應(yīng)思路

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

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

3，將屏幕高度減去元素到屏幕頂部的距離，即為可用高度（可能會(huì)存在底部bar，具體應(yīng)用根據(jù)實(shí)際情況相結(jié)合）。

scroll-view的高度自適應(yīng)實(shí)現(xiàn)過(guò)程（只包含部分需用代碼，具體請(qǐng)結(jié)合實(shí)際的小程序開(kāi)發(fā)項(xiàng)目）：

頁(yè)面部分的代碼

// scroll-view的代碼 class名為scrollClass，通過(guò)該名稱獲取元素到屏幕頂部的距離；使用:style動(dòng)態(tài)綁定高度。
<scroll-view scroll-y="true" class="scrollClass" :style="{height:scrollHeight+'px'}">
	//此處省略滾動(dòng)內(nèi)部的代碼
</scroll-view>

JS部分代碼

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

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

	onReady() {
		let _this = this;
		
		uni.getSystemInfo({ //調(diào)用uni-app接口獲取屏幕高度
			success(res) { //成功回調(diào)函數(shù)
				let wHeight=res.windowHeight //windoHeight為窗口高度，主要使用的是這個(gè)
				let titleH=uni.createSelectorQuery().select(".scrollView"); //想要獲取高度的元素名（class/id）
				titleH.boundingClientRect(data=>{
					_this.scrollHeight=wHeight-data.top  //計(jì)算高度：元素高度=窗口高度-元素距離頂部的距離（data.top）
				}).exec()
			}
		})
		
		
	},