uniapp如何获取dom节点

发布时间:2022-05-23 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了uniapp如何获取dom节点脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

uniapp获取dom节点的方法:1、通过“let dom=query.select(selector)”方法获取匹配选择器的第一个节点;2、使用“letdoms=query.selectAll(selector)”方法获取所有节点。

uniapp如何获取dom节点

本教程操作环境:windows7系统、uni-app2.5.1版本、ThinkPad t480脑。

推荐(免费):uni-app开发教程

uni-app 获取DOM 节点

【参考官网:https://uniapp.dcloud.io/api/ui/nodes-info?id=selectorqueryexec】

一、如何获取SelectorQuery对象实例:

let query=uni.createSelectorQuery();

功能:返回一个SelectorQuery对象的实例,该实例用来查询DOM节点的信息。

注意事项

(1)该方法需要在生命周期mounted后进行调用。

(2)nvue不支持该方法。

二、如何获取DOM节点:

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

let dom=query.select(selector)

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

letdoms=query.selectAll(selector)

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

三、如何获取DOM节点的信息:(以doms为例

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

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

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

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

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

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

四、代码实例

1、例1: <template>中有多个类名为leftITem的节点,如何获取这些节点距离顶部的距离,并将这些距离赋给一个在数据区已经定义好的名为leftItemTop的数组。

uni.createSelectorQuery().selectAll(".leftItem").boundingClienRect(res=>{
this.leftItemTop=res.map(item=>item.top)
}).exec(()=>{
console.LOG(this.leftItemTop)
})

2、例2:<template:>中有多个类名为rightItem的节点,如何获取这些节点的高度,并将这些高度赋值给一个在数据区已经定义好的名为rightItem的数组。

uni.createSelectorQuery().selectAll(".rightItem").fields({
size:true
},res=>{
this.rightItemHeight=res.map(item=>{item.height})
}).exec(()=>{
console.log(this.rightItemHeight)
})

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

【参考官网:https://cn.vuejs.org/v2/api/#vm-nextTick】

【推荐阅读:https://segmentfault.COM/a/1190000012861862】

**问题:**某个数据区的变量temp讲影响DOM结构的渲染,且规定该变量更新后直到DOM结构重新渲染完成后还需要做一个其他的操作,则这些其他的操作如何保证在DOM结构重新渲染完成后才发生?

解决方案:这些需要DOM结构重新渲染完成后才发生的操作必须写在this&amp;nextTick(function(){})格式的回调函数中。

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

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

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

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

上述事例的代码如下:

uni.request({
url:"http://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)
})
})
}
})

以上就是uniapp如何获取dom节点的详细内容,更多请关注脚本宝典其它相关文章

脚本宝典总结

以上是脚本宝典为你收集整理的uniapp如何获取dom节点全部内容,希望文章能够帮你解决uniapp如何获取dom节点所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:uniapp