uni-app 获取一个目标元素的高,元素到顶部的距离

	// 获取一个目标元素的高度
		data() {
			return {
				viewHeight: 0, // 元素的高度 
			}
		},
		mounted() { 
		this.getHeight()
		},
		methods: {
			async getHeight() {
			//class-name 元素类名   	viewHeight 元素的高度 
			await this.getViewHeight('class-name', 'viewHeight');
			},
			getViewHeight(name, val) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					//query.select('.' + name).fields({size: true},res => {
					query.select('.' + name).boundingClientRect(res=> {
						// 如果节点尚未生成,res值为null,循环调用执行
						if(!res) {
							setTimeout(() => {
								this.getViewHeight(name);
							}, 10);
							return ;
						}
						this[val] = res.height;
					}).exec();
				})
			}
		}
	// 获取view 到顶部的距离   class-name 元素类名
			getViewTop() {
				let arr = []
				new Promise(resolve => {
					let selectorQuery = uni.createSelectorQuery();
					selectorQuery.selectAll('.class-name').boundingClientRect((rects) => {
						// 如果节点尚未生成,rects值为[](因为用selectAll,所以返回的是数组),循环调用执行
						if(!rects.length) {
							setTimeout(() => {
								this.getViewTop();
							}, 10);
							return ;
						}
						rects.forEach((rect) => {
							// 这里减去rects[0].top,是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
							arr.push(rect.top - rects[0].top);
							resolve();
						})
					}).exec()
				})
			},

你可能感兴趣的:(uni-app,小程序,javascript,vue.js,uni-app)