uniapp获取节点信息,uniapp获取当前页面地址
Uni获取dom节点的方法：1。通过“let dom=query.select(selector)”方法获取匹配选择器的第一个节点；2.使用“let doms=query . select all(selector)”方法获取所有节点。
UNI-APP开发(仿饿)开发课程：进入学习
本教程运行环境：windows7系统，Uni-App版本2.5.1，thinkpad t480电脑。
推荐(免费):uni-app开发教程
uni-app 获取DOM 节点
【参考https://uniapp.dcloud.io/api/ui/nodes-info?官网】id=selectorqueryexec】
一、如何获取SelectorQuery对象实例：
let query=uni . createselectquery()；函数：返回SelectorQuery对象的实例，用于查询DOM节点的信息。
注意事项：
(1)此方法需要在装入生命周期后调用。
(2)nvue技术不支持这种方式。
二、如何获取DOM节点：
1.获取匹配选择器的第一个节点：
DOM=query.select(选择器)2。获取匹配选择器的所有节点：
设doms=query.selectall (selector)以上两种方法都返回NodesRef对象实例，用于获取DOM节点的信息。
三。如何获取DOM节点的信息：(以doms为例)
1.获取DOM节点的布局位置信息：
doms . boundingclienrect(function(RES){
//RES:{左，上，右，下，宽，高}
}).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}
}，函数(res){
//res可以返回第一个参数对象中指定为true的相关信息。
}).exec(function(){
//成功获取上述节点信息后执行的回调函数
})四。代码示例
1.示例1:模板中有多个类名为leftItem的节点。如何获得这些节点到顶部的距离，并将这些距离分配给一个已经在数据区中定义的名为leftItemTop的数组？
uni.createSelectorQuery()。选择全部(。leftItem)。boundingClienRect(res={
this . left item top=RES . map(item=item . top)
}).exec(()={
console.log(this.leftItemTop)
})2.示例2:模板2中有多个类名为rightItem的节点。如何获取这些节点的高度，并将这些高度赋给一个已经在数据区定义好的名为rightItem的数组？
uni.createSelectorQuery()。选择全部(。rightItem)。字段({
尺寸：真
}，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结构的操作，必须用thisnextTick(function(){})格式写在回调函数中。
domData中的块v-for=(item，index
view class= domItem { { item . title } }/view
/block假设上面的结构是由数据domData驱动的。变量domData需要先从接口获取必要的数据，然后渲染到DOM结构中。
data(){
返回{
DomData:[]，//用于存储从接口获取的DOM数据。
domite width:[]//用于存储获取的DOM结构的宽度。
}
}当变量domData从接口获取数据时，需要确保DOM结构渲染成功，才能获取这些结构的宽度。所以后面的操作要包装在this.nextTick(function(){})里面，写在this.nextTick(function(){})的回调函数里面。
上述案例的代码如下：
uni.request({
网址： http://localhost:8080/…，
数据：{.},
成功：res={
这个。DOM data=RES . data
this.nextTick(()={//该格式保证了domData已经得到接口数据并成功渲染数字正射影像图结构
uni.createSelectorQuery().选择全部(。domItem) .字段({
尺寸：真
}，res={
这个。domite width=RES . map(item=item。宽度)
}).exec(()={
控制台。日志(这个。点宽度)
})
})
}
})以上就是uniapp如何获取数字正射影像图节点的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。