uniappでdomノードを取得する方法

Uniapp の dom ノード取得方法: 1. 「let dom=query.select(selector)」メソッドを通じてセレクターに一致する最初のノードを取得します; 2. 「letdoms=query.selectAll(selector)」を使用します。 " メソッドを使用してすべてのノードを取得します。

#このチュートリアルの動作環境: Windows7 システム、uni-app2.5.1 バージョン、thinkpad t480 コンピューター。

おすすめ(無料):

uni-app開発チュートリアル

uni-app DOMノードの取得

[参考公式サイト] : https://uniapp.dcloud.io/api/ui/nodes-info?id=selectorqueryexec]

1. SelectorQuery オブジェクト インスタンスの取得方法:

let query=uni.createSelectorQuery();

関数: を返します。 SelectorQuery オブジェクト インスタンス。このインスタンスは、DOM ノードの情報をクエリするために使用されます。

注:

(1) このメソッドは、ライフサイクルがマウントされた後に呼び出す必要があります。

(2) nvue テクノロジーはこの方法をサポートしていません。

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

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

let dom=query.select(selector)

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

letdoms=query.selectAll（selector）

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

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

4. コード例

1. 例 1: multiple in