目录

Vue

获取单个节点信息

在页面中使用单个节点信息方法

 获取多个节点信息

在页面中使用多个节点信息方法

  获取循环节点信息

在页面中使用循环节点信息方法

NVue

获取单个节点的信息

Vue

注：传值名称必须带标识符，比如：#info  .info，如果类名有多个节点在使用，建议使用 循环节点信息方法，可以获取当前类名所有节点的信息，则获取自上而下的第一个类名节

 我是v3 封装的 mixin，从 mixin 来引入使用

	let {
		getCreateSelectorQueryNode, // 获取单个节点信息
        getCreateSelectorQueryNodeAll, // 获取多个节点信息
        getCreateSelectorAllQueryNode // 获取循环节点信息
	} = mixin();

获取单个节点信息

const getCreateSelectorQueryNode = async (name) => { // 获取单个节点
		return new Promise((resolve, reject) => {
			const query = uni.createSelectorQuery().in(this);
			query.select(name).boundingClientRect();

			query.exec((res) => {
				if (res && res[0]) {
					resolve(res[0]);
				} else {
					reject(new Error('Element not found'));
				}
			});
		})
	};

在页面中使用单个节点信息方法

getCreateSelectorQueryNode('#id').then(res => { 
	console.log(res);
 })

 获取多个节点信息

const getCreateSelectorQueryNodeAll = async (classSelectors = []) => { // 获取多个节点
		return new Promise((resolve, reject) => {
			const query = uni.createSelectorQuery().in(this);
			classSelectors.forEach((selector) => {
				query.select(selector).boundingClientRect();
			});
			query.exec((res) => {
				if (res && res[0]) {
					resolve(res);
				} else {
					reject(new Error('Element not found'));
				}
			});
		});
	};

在页面中使用多个节点信息方法

getCreateSelectorQueryNodeAll(['#id','.class']).then(res => { 
    console.log(res); // 返回的是数组格式，下标信息对应着传参下标节点
 })

  获取循环节点信息

const getCreateSelectorAllQueryNode = async (name) => { // 获取循环项节点
		return new Promise((resolve, reject) => {
			const query = uni.createSelectorQuery().in(this);
			query.selectAll(name).boundingClientRect();
			query.exec((res) => {
				if (res && res[0]) {
					resolve(res[0]);
				} else {
					reject(new Error('Element not found'));
				}
			});
		})
	};

在页面中使用循环节点信息方法

getCreateSelectorAllQueryNode('.class').then(res => { // 使用类名获取多个当前类名节点的信息
    console.log(res); // 返回的是数组格式，下标信息对应着类名自上而下顺序
 })

NVue

获取单个节点的信息

getComponentRect(节点，回调函数)

• ref，要获取外框的那个节点。
• callback，异步方法，通过回调返回信息。

const dom = uni.requireNativePlugin('dom') // 引入原生插件
dom.getComponentRect(this.$refs.box, res => {
	 console.log(res);
 })