首頁 >web前端 >uni-app >uni-app如何取得dom節點

uni-app如何取得dom節點

coldplay.xixi
coldplay.xixi原創
2020-12-08 11:06:1713242瀏覽

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 : ###d477f9ce7bf77f53fbcf36bec1b69b7a###中有多個類別名為leftItem的節點,如何取得這些節點距離頂部的距離,並將這些距離賦給一個在資料區已經定義好的名為leftItemTop的陣列。###
uni.createSelectorQuery().selectAll(".leftItem").boundingClienRect(res=>{
this.leftItemTop=res.map(item=>item.top)
}).exec(()=>{
console.log(this.leftItemTop)
})
###2、例2:###cf02b64373d56bfa6005cf61bdd2cdf0###中有多個類別名為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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn