uni-app获取元素高度等信息，并设置元素top信息

本文主要简介uni-app获取元素信息及设置信息等

获取元素高度

可查看官方文档

mounted() {
	const query = uni.createSelectorQuery().in(this);
	query.select('#editor').boundingClientRect(data => {
		console.log(data)
	}).exec();

},

这里的data用于获取这个元素大小及位置信息，

获取的值data如下：

 

设置元素的位置

设置按钮元素位置：

<button :style="{top: btn_top + 'px'}">提交</button>

这里通过style对top值进行动态设置。

在script部分对btn_top进行设置，以达到top值变化的目的：

export default {
	data() {
		return {
			btninfo: 320,
		}
	},
	computed: {
		btn_top() {
			return this.btninfo;
		}
	},
	methods: {
		radioChange: function(evt) {
			if ('res' === evt.target.value) {
				this.btninfo = 650;
			}else{
				this.btninfo = 420;
			}
		}
	}
}

这边是我的单选逻辑进行的设置，但是大体的设置就是改变 style内的值进行设置。

 

 

感谢weixin_45581741的博客uniapp获取元素高度  以及的前端菜鸡儿博客uni-app swiper设置自定义高度博客。