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: <template>
에 leftItem이라는 클래스 이름을 가진 노드가 여러 개 있습니다. 이 노드들을 데이터 영역에 정의된 노드에 할당하세요. leftItemTop이라는 배열이 있습니다. <template>
中有多个类名为leftItem的节点,如何获取这些节点距离顶部的距离,并将这些距离赋给一个在数据区已经定义好的名为leftItemTop的数组。
uni.createSelectorQuery().selectAll(".leftItem").boundingClienRect(res=>{ this.leftItemTop=res.map(item=>item.top) }).exec(()=>{ console.log(this.leftItemTop) })
2、例2:<template:>
uni.createSelectorQuery().selectAll(".rightItem").fields({ size:true },res=>{ this.rightItemHeight=res.map(item=>{item.height}) }).exec(()=>{ console.log(this.rightItemHeight) })
<template:>
. 이러한 노드의 높이를 구하고 이 높이를 할당하는 방법은 무엇입니까? 데이터 영역에 정의된 rightItem이라는 배열을 제공하세요. rrreee🎜관련 무료 학습 권장사항: php 프로그래밍
(동영상)
위 내용은 uni-app에서 DOM 노드를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!