uniapp에서 DOM 노드를 얻는 방법

uniapp이 DOM 노드를 가져오는 방법: 1. "let dom=query.select(selector)" 메서드를 통해 선택기와 일치하는 첫 번째 노드를 가져옵니다. 2. "letdoms=query.selectAll(selector)를 사용하여 모든 노드를 가져옵니다. )" 메소드 노드.

이 튜토리얼의 운영 환경: windows7 시스템, uni-app2.5.1 버전, thinkpad t480 컴퓨터.

추천(무료): uni-app development tutorial

uni-app DOM 노드 받기

[참고 공식 홈페이지: https://uniapp.dcloud.io/api/ui/nodes-info?id = selectorqueryexec】

1. SelectorQuery 객체 인스턴스를 얻는 방법:

let query=uni.createSelectorQuery();

Function: DOM 노드의 정보를 쿼리하는 데 사용되는 SelectorQuery 객체의 인스턴스를 반환합니다.

참고:

(1) 이 메서드는 라이프 사이클이 마운트된 후에 호출되어야 합니다.

(2) NVue 기술은 이 방법을 지원하지 않습니다.

2. DOM 노드를 가져오는 방법:

1. 선택기와 일치하는 첫 번째 노드를 가져옵니다.

let dom=query.select(selector)

2. 선택기와 일치하는 모든 노드를 가져옵니다.

letdoms=query.selectAll（selector）

위 두 메서드 모두 NodesRef 개체 인스턴스를 반환합니다. , DOM 노드에 대한 정보를 얻는 데 사용되는 인스턴스입니다.

3. 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(){
//上述节点信息获取成功后执行的回调函数
})

IV. 코드 예제

1. 예제 1: ca9ceec3554d5f69281718c4b9ecdc8b에 leftItem이라는 이름의 노드가 여러 개 있습니다. to a leftItemTop이라는 배열이 데이터 영역에 정의되었습니다.

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

2. 1fd3caf0d2b35f690626897a90ea6adf에 rightItem이라는 노드가 여러 개 있습니다. 이러한 노드의 높이를 가져오고 데이터 영역에 정의된 rightItem이라는 노드에 이 높이를 할당하는 방법은 무엇입니까?

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

5. 데이터 렌더링 DOM으로 인한 비동기 문제:

[참고 공식 홈페이지: https://cn.vuejs.org/v2/api/#vm-nextTick]

[추천 자료: https://segmentfault . com/a/1190000012861862】

**질문:**특정 데이터 영역의 temp 변수는 DOM 구조의 렌더링에 영향을 미치며, 변수가 업데이트된 후에는 다음 작업이 완료될 때까지 다른 작업을 수행해야 한다고 규정되어 있습니다. DOM 구조가 다시 렌더링되면 이러한 다른 작업은 DOM 구조가 다시 렌더링된 후에만 발생하도록 어떻게 보장합니까?

해결책: DOM 구조를 다시 렌더링해야 하는 이러한 작업은 this&nextTick(function(){}) 형식으로 콜백 함수에 작성되어야 합니다.

<block v-for="(item,index) in domData">
<view class="domItem">{{item.title}}</view>
</block>

위의 구조가 데이터 domData에 의해 구동되는 구조라고 가정해 보겠습니다. domData 변수는 먼저 인터페이스에서 필요한 데이터를 얻은 다음 이를 DOM 구조로 렌더링해야 합니다.

data(){
return{
domData:[], //用于储存从接口中获取的DOM数据
domItemWidth:[] //用于储存获取的DOM结构的宽度
}
}

변수 domData가 인터페이스에서 데이터를 가져온 후 DOM 구조가 성공적으로 렌더링되었는지 확인해야 이러한 구조의 너비를 얻을 수 있습니다. 따라서 후속 작업은 this.nextTick(function(){으로 래핑되어야 합니다. }) , this.nextTick(function(){})의 콜백 함수 내부에 작성됩니다.

위 예제의 코드는 다음과 같습니다.

uni.request({
url:"http://localhost:8080/......",
data:{.....},
success:res=>{
this.domData=res.data;
this.nextTick(()=>{//该格式保证了domData已经得到接口数据并成功渲染DOM结构
uni.createSelectorQuery().selectAll(".domItem").fields({
size:true
},res=>{
this.domItemWidth=res.map(item=>item.width)
}).exec(()=>{
console.log(this.domItemWidth)
})
})
}
})

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