uniapp如何获取dom节点
uniapp获取dom节点的方法:1、通过“let dom=query.select(selector)”方法获取匹配选择器的第一个节点;2、使用“letdoms=query.selectall(selector)”方法获取所有节点。
本教程操作环境: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: 中有多个类名为leftItem的节点,如何获取这些节点距离顶部的距离,并将这些距离赋给一个在数据区已经定义好的名为leftItemTop的数组。
uni.createSelectorQuery().selectAll(".leftItem").boundingClienRect(res=>{this.leftItemTop=res.map(item=>item.top)}).exec(()=>{console.log(this.leftItemTop)})
2、例2:中有多个类名为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】
【