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 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)
})

5. データレンダリング DOM によって引き起こされる非同期の問題:

[参考公式 Web サイト: 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 中国語 Web サイトの他の関連記事を参照してください。