首页 > web前端 > uni-app > uni-app如何获取dom节点

uni-app如何获取dom节点

coldplay.xixi
发布: 2023-01-13 00:44:02
原创
13315 人浏览过

uniapp获取dom节点的方法:1、获取匹配选择器的第一个节点,代码为【let dom=query.select(selector)】;2、获取匹配选择器的所有节点,代码为【letdoms=query.selectAll(selec.】。

uni-app如何获取dom节点

本教程操作环境:windows7系统、uni-app2.5.1版本,Dell G3电脑,该方法适用于所有品牌电脑。

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

uniapp获取dom节点的方法:

一、如何获取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)
})
登录后复制

相关免费学习推荐:php编程(视频)

以上是uni-app如何获取dom节点的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板