uni-app 获取 DOM 节点的相关信息

uni-app 获取 DOM 节点的相关信息

一、如何获取 SelectorQuery 对象实例

let  query  = uni.createSelectorQuery();

功能：返回一个selectorQuery对象的实例，该实例用来查询DOM节点的信息。
注意事项：
（1）该方法需要在生命周期mounted后进行调用。
（2）nvue不支持该方法。

二、如何获取DOM节点

1、获取匹配选择器的第一个节点：

let dom = query.select(selector)

2、获取匹配选择器的所有节点

let dom = query.selectAll(selector)

上述两个方法均返回NodesRef对象实例，该实例用来获取DOM节点多少信息。

三、如何获取DOM节点的信息：（以doms为实例）

1、获取DOM节点的布局位置信息：

doms.boundingClientRect(function(res){
	//res:{left,top,right,bottom,width,height}
}).exec(function(){
	//上述布局位置信息获取成功后执行的回调函数
})

2、获取DOM节点的滚动位置信息：

doms.scrollOffset(function(res){
	//res:{scrollLeft,scrollTop}
})exec(function(){
	//上述滚动位置信息获取成功后执行的回调函数
})

3、获取DOM节点的所有信息

doms.fields({
	rect:true   //是否返回节点布局位置信息{left,top,right,bottomn}
	size:true   //是否返回节点尺寸信息{width,height}
	scrollOffset:true  //是否返回节点滚动信息{scrollLeft,scrollTop}
},function(res){
	//res可以返回第一个参数对象中制定为true的相关信息
}).exec(function(function){
	//上述节点信息获取成功后执行的回调函数
})

四、代码示例

1、例1：中有多个类名为leftitem的节点，如何获取这些节点距离顶部的距离，并将这些激励赋给一个在数据区已经定义好名为；leftitemTop的数组。

uni.createSelectorQuery().selectAll(“.rightItem”).fields({
	size:true
	},res-=>{
		this.rightitemHeight=res.map(item=>item.lenght);;
	}).exec(()=>{
		console.log(this.rightitemHeight);
	})

五、数据熏染DOM造成的异步问题

【参考官网：https://cn.vuejs.org/v2/api/#vm-nextTick】
【推荐阅读：https://segmentfault.com/a/1190000012861862】
问题：
某个数据区的变量temp将影响DOM结构的渲染，且规定该变量更新后知道DOM结构重新渲染完成后还需要做一个其它的操作，则这些其它的操作如何在保证在结构重新渲染完成后才发生？

解决方案：
这次为需要DOM结构重新渲染完后才能后完成后才发生的操作必须写在this.$nextTick(function(){})格式的回调函数中
例：
中有一组节点要根据调取接口额数据才能渲染出来，调取接口后数据存储在数据区中一个名为domData变量中。要求当DOM结构渲染成功后，获取每一个对象的宽度并将这些宽度储存在数据区中一个名为domitemWidth的数字中。

<block v-for="(item,index)in domData">
	<view class="domitem">{{item.title}}</view>
</block>

我们就说上述结构基于数据donData驱动的结构，变量domData需要先从接口获取必要的数据，在渲染到DOM结构中。

data(){return{
	domData:[],   //用于储存从接口中获得的DOM数据
	domitemWidth:[]  //用于储存获取的DOM结构的宽度
	}
}

当变量domData从接口中得到数据后，还必须保证成功渲染DOm接口之后，才能去获取这些结构的宽度，因此要将后续的操作用this.$nextTick(function())包裹起来，即书写在this.$nextTick()的回调函数内部。

上述实例的代码如下所示：

uni.request({
	url:'/api/localhost:8080/....',
	data:{.....},
	success:res=>{
		this.domData=res.data;
		this.$nextTick(()=>{
		//该格式保证了domData已经得到接口数据并成功渲染DOM结构
		uni.createSelectorQuery().selectAll(“.domItem”).fields({  
			size：true
			}，res=>{
				this.domitemWidth=res.map(item=>item.width);
			});
			}).exec(()=>{
				console.log(this.domitemWidth);
			})
		})
	}
})