uniappでdomノードを取得する方法-uni-app-php.cn

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

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

#このチュートリアルの動作環境: 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