欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

uni-app获取当前节点下所有组件的高度总和

程序员文章站 2024-01-10 12:58:20
...

必须写在uni-app生命周期onready中

data() {
			return {
				//选中的索引
				topBarIndex:0,
				//顶栏跟随的索引id值
				scrollIntoIndex:"top0",
				//中间内容块的高度
				mainClientHeight:0,
				//顶栏数据
				topBar:[
					
				],
				//承载数据
				newTopBar:[],
			}
		},
onReady(){
			//方法一
			//获取节点信息
			let view=uni.createSelectorQuery().select('.home-data');
			// console.log(view)
			//获取对应的节点值位置高度信息
			view.boundingClientRect(data => {
			  // console.log("得到布局位置信息" + JSON.stringify(data));
			  // console.log("节点离页面顶部的距离为" + data.top);
			  // 计算高度值并赋值
			  //this.mainClientHeight=data.height;
			  this.mainClientHeight=data.height;
			  //console.log(data.height);
			}).exec();
		},
		//方法二
		uni.getSystemInfo({
				success: (res) => {
					console.log(res);
					console.log(res.windowHeight) //可使用窗口高度
					this.mainClientHeight=res.windowHeight;
					//upx2px() rpx转成px  80是顶栏的高度
					// this.mainClientHeight=res.windowHeight-uni.upx2px(80)-this.getClientHeight();
					
				}
			})