分享最實(shí)用的技術(shù),創(chuàng)造更大的價(jià)值

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

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

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

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)過程(只包含部分需用代碼,具體請(qǐng)結(jié)合實(shí)際的小程序開發(fā)項(xiàng)目):


頁面部分的代碼

// scroll-view的代碼 class名為scrollClass,通過該名稱獲取元素到屏幕頂部的距離;使用: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()
			}
		})
		
		
	},


聯(lián)系
QQ
電話
咨詢電話:189-8199-7898
TOP