分享最实用的技术,创造更大的价值

uni-app必威体育中文app小程序中scroll-view的高度设置为剩余可用高度的方法

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

uni-app必威体育中文app小程序中scroll-view的高度设置为剩余可用高度的方法

scroll-view的高度自适应思路

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

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

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


scroll-view的高度自适应实现过程(只包含部分需用代码,具体请结合实际的小程序必威体育中文app项目):


页面部分的代码

// 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()
			}
		})
		
		
	},


联系
QQ
电话
咨询电话:189-8199-7898
TOP