微信小程序中怎么查WXML節(jié)點(diǎn)信息

這篇文章主要介紹微信小程序中怎么查WXML節(jié)點(diǎn)信息，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

1、節(jié)點(diǎn)信息查詢(xún)

const query = wx.createSelectorQuery();//【返回節(jié)點(diǎn)查詢(xún)對(duì)象：SelectorQuery】
//組件內(nèi)，則用this.createSelectorQuery()；或者query .in(this);

節(jié)點(diǎn)查詢(xún)對(duì)象：SelectorQuery
.in(this) //限定范圍為自身組件,返回【節(jié)點(diǎn)查詢(xún)對(duì)象】(所以可以和下面的方法，點(diǎn)連調(diào)用)
.exec(function callback) //執(zhí)行查詢(xún)

//根據(jù)str選擇器查詢(xún)，或者查詢(xún)視窗。【返回節(jié)點(diǎn)對(duì)象：NodesRef】
.select(selector) //根據(jù)選擇器str查詢(xún)，返回一個(gè)匹配
.selectAll(selector) //根據(jù)選擇器str查詢(xún)，返回所有匹配
.selectViewport()//選擇顯示區(qū)域

節(jié)點(diǎn)對(duì)象：NodesRef
//執(zhí)行底下請(qǐng)求后，返回SelectorQuery對(duì)象。
.fields({//這個(gè)是常規(guī)查詢(xún)，你想要查詢(xún)的信息，配置好，就可以查詢(xún)。底下還有細(xì)分的某一類(lèi)查詢(xún)。
 id：true，//這兩個(gè)以下細(xì)分節(jié)點(diǎn)查詢(xún)都會(huì)有這個(gè)返回
 dataset：true，

 rect:true，//這兩個(gè)包括id,dataset。相當(dāng)于boundingClientRect查詢(xún)
 size:true，

 scrollOffset:true，//這個(gè)包括,id,dataset。相當(dāng)于scrollOffset查詢(xún)

 context：true，//這個(gè)包括id,dataset。相當(dāng)于context查詢(xún)
 
 properties:[]，//可以獲取除id,class,style，事件綁定之外的屬性
 computedStyle:[]，//可以獲取樣式
})

.boundingClientRect(function callback)//相對(duì)于顯示區(qū)域，以像素為單位
//返回節(jié)點(diǎn)，相當(dāng)于視圖的(左上為原點(diǎn))四個(gè)邊的邊界像素。及寬高。及dataset
//相當(dāng)于：id：true， dataset：true，rect:true，size:true,


.scrollOffset(function callback)//添加節(jié)點(diǎn)的滾動(dòng)位置查詢(xún)請(qǐng)求。以像素為單位。節(jié)點(diǎn)必須是 scroll-view 或者 viewport
//相當(dāng)于 id：true，dataset：true，

.context(function callback)//添加節(jié)點(diǎn)的 Context 對(duì)象查詢(xún)請(qǐng)求。
目前支持 VideoContext、CanvasContext、LivePlayerContext 和 MapContext 的獲取

總結(jié)：

第一步，返回節(jié)點(diǎn)查詢(xún)對(duì)象：

const query = wx.createSelectorQuery();

第二步，查詢(xún)對(duì)象執(zhí)行查詢(xún)，返回節(jié)點(diǎn)對(duì)象：

query .in(this);//返回節(jié)點(diǎn)查詢(xún)對(duì)象【如果要限定組件范圍則需要】

select(selector)/selectAll(selector)/selectViewport()     .

第三步，節(jié)點(diǎn)對(duì)象配置需要的節(jié)點(diǎn)信息，返回查詢(xún)對(duì)象:

fields()/boundingClientRect()/scrollOffset()/context()

第四步，查詢(xún)對(duì)象執(zhí)行查詢(xún)：

exec(function callback)

說(shuō)明：function callback，可以放在exec。也可以放在boundingClientRect()/scrollOffset()/context()

但如果像fields().。只能放在exec

2、節(jié)點(diǎn)相交狀態(tài)查詢(xún)

wx.createIntersectionObserver();//組件用：wx.createIntersectionObserver(this);
//返回節(jié)點(diǎn)觀(guān)察到對(duì)象

選擇參照區(qū)域
.relativeTo(selector,[margins])//選擇某個(gè)節(jié)點(diǎn)區(qū)域作為參照物
或
relativeToViewport([margins])//選擇視圖置為參照物

其中：margins：用來(lái)擴(kuò)展（或收縮）參照節(jié)點(diǎn)布局區(qū)域的邊界

其中：margins：用來(lái)擴(kuò)展（或收縮）參照節(jié)點(diǎn)布局區(qū)域的邊界

選擇觀(guān)察者，并且開(kāi)始監(jiān)聽(tīng)
.observe(string targetSelector, function callback)

停止監(jiān)聽(tīng)：
.disconnect()

以上是“微信小程序中怎么查WXML節(jié)點(diǎn)信息”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！