uni-app에서 DOM 노드를 얻는 방법

Uniapp의 DOM 노드 획득 방법: 1. 선택기와 일치하는 첫 번째 노드를 가져옵니다. 코드는 [let dom=query.select(selector)]입니다. 2. 선택기와 일치하는 모든 노드를 가져옵니다. 코드는 [letdoms= query입니다. .selectAll (선택].

이 튜토리얼의 운영 환경: windows7 시스템, uni-app2.5.1 버전, Dell G3 컴퓨터. 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

권장(무료) ): uni-app 개발 튜토리얼

uniapp에서 dom 노드를 얻는 방법:

1. DOM 노드를 얻는 방법:

1. selector:

let dom=query.select(selector)

2. 셀렉터와 일치하는 모든 노드 가져오기:

letdoms=query.selectAll（selector）

위 두 메서드 모두 DOM 노드의 정보를 가져오는 데 사용되는 NodesRef 개체 인스턴스를 반환합니다.

2. 정보를 가져오는 방법. 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(){
//上述节点信息获取成功后执行的回调函数
})

3. 코드 예제

1. 예제 1: d477f9ce7bf77f53fbcf36bec1b69b7a에 leftItem이라는 클래스 이름을 가진 노드가 여러 개 있습니다. 이 노드들을 데이터 영역에 정의된 노드에 할당하세요. leftItemTop이라는 배열이 있습니다. d477f9ce7bf77f53fbcf36bec1b69b7a中有多个类名为leftItem的节点，如何获取这些节点距离顶部的距离，并将这些距离赋给一个在数据区已经定义好的名为leftItemTop的数组。

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

2、例2：cf02b64373d56bfa6005cf61bdd2cdf0

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

2. cf02b64373d56bfa6005cf61bdd2cdf0 . 이러한 노드의 높이를 구하고 이 높이를 할당하는 방법은 무엇입니까? 데이터 영역에 정의된 rightItem이라는 배열을 제공하세요.

rrreee

관련 무료 학습 권장사항: php 프로그래밍
(동영상)

🎜

위 내용은 uni-app에서 DOM 노드를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!