ユニアプリでdomノードを取得する方法

Uniapp の dom ノード取得方法: 1. セレクターに一致する最初のノードを取得します、コードは [let dom=query.select(selector)]; 2. セレクターに一致するすべてのノードを取得します。コードは [letdoms=query.selectAll(select.] です。

このチュートリアルの動作環境: Windows7 システム、uni-app2.5.1 バージョン、 Dell G3 コンピュータ、この方法はすべてのブランドのコンピュータに適用できます。

推奨 (無料): ユニアプリ開発チュートリアル

Uniapp の DOM ノードの取得方法:

1. DOM ノードの取得方法:

1. 最初に一致するセレクター ノードを取得します:

let dom=query.select(selector)

2. セレクターに一致するすべてのノードを取得します:

letdoms=query.selectAll（selector）

上記 2 つのメソッドはどちらも、DOM ノードを取得するために使用される NodesRef オブジェクト インスタンスを返します。 information.

2. DOM ノードの情報を取得する方法: (dom を例にします)

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 という名前の配列に代入する方法.

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 プログラミング (ビデオ)

以上がユニアプリでdomノードを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。