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

绝地灬酷狼 2023-03-01 06:16 41阅读 0赞

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

## 获取元素高度 ##

可查看[官方文档][Link 1]

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

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

获取的值data如下：

![20200722180320269.png][]

## 设置元素的位置 ##

设置按钮元素位置：

这里通过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][weixin_45581741]的博客[uniapp获取元素高度][uniapp]  以及的[![返回主页][aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vc2tpbnMvY3VzdG9tL2ltYWdlcy9sb2dvLmdpZg]][aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vc2tpbnMvY3VzdG9tL2ltYWdlcy9sb2dvLmdpZg 1][前端菜鸡儿][aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vc2tpbnMvY3VzdG9tL2ltYWdlcy9sb2dvLmdpZg 1]博客[uni-app swiper设置自定义高度][uni-app swiper]博客。

[Link 1]: https://uniapp.dcloud.io/api/ui/nodes-info
[20200722180320269.png]: /images/20230209/6ab29e84b59c434eb98d5fb1712abde5.png
[weixin_45581741]: https://me.csdn.net/weixin_45581741
[uniapp]: https://blog.csdn.net/weixin_45581741/article/details/106519784?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-1
[aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vc2tpbnMvY3VzdG9tL2ltYWdlcy9sb2dvLmdpZg]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vc2tpbnMvY3VzdG9tL2ltYWdlcy9sb2dvLmdpZg
[aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vc2tpbnMvY3VzdG9tL2ltYWdlcy9sb2dvLmdpZg 1]: https://www.cnblogs.com/yushihao/
[uni-app swiper]: /images/20230209/aff2b65b3d5a45ed8e93a494ab9157cc.png