微信小程序中怎么查WXML節點信息

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

1、節點信息查詢

const query = wx.createSelectorQuery();//【返回節點查詢對象：SelectorQuery】
//組件內，則用this.createSelectorQuery()；或者query .in(this);

節點查詢對象：SelectorQuery
.in(this) //限定范圍為自身組件,返回【節點查詢對象】(所以可以和下面的方法，點連調用)
.exec(function callback) //執行查詢

//根據str選擇器查詢，或者查詢視窗。【返回節點對象：NodesRef】
.select(selector) //根據選擇器str查詢，返回一個匹配
.selectAll(selector) //根據選擇器str查詢，返回所有匹配
.selectViewport()//選擇顯示區域

節點對象：NodesRef
//執行底下請求后，返回SelectorQuery對象。
.fields({//這個是常規查詢，你想要查詢的信息，配置好，就可以查詢。底下還有細分的某一類查詢。
 id：true，//這兩個以下細分節點查詢都會有這個返回
 dataset：true，

 rect:true，//這兩個包括id,dataset。相當于boundingClientRect查詢
 size:true，

 scrollOffset:true，//這個包括,id,dataset。相當于scrollOffset查詢

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

.boundingClientRect(function callback)//相對于顯示區域，以像素為單位
//返回節點，相當于視圖的(左上為原點)四個邊的邊界像素。及寬高。及dataset
//相當于：id：true， dataset：true，rect:true，size:true,


.scrollOffset(function callback)//添加節點的滾動位置查詢請求。以像素為單位。節點必須是 scroll-view 或者 viewport
//相當于 id：true，dataset：true，

.context(function callback)//添加節點的 Context 對象查詢請求。
目前支持 VideoContext、CanvasContext、LivePlayerContext 和 MapContext 的獲取

總結：

第一步，返回節點查詢對象：

const query = wx.createSelectorQuery();

第二步，查詢對象執行查詢，返回節點對象：

query .in(this);//返回節點查詢對象【如果要限定組件范圍則需要】

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

第三步，節點對象配置需要的節點信息，返回查詢對象:

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

第四步，查詢對象執行查詢：

exec(function callback)

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

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

2、節點相交狀態查詢

wx.createIntersectionObserver();//組件用：wx.createIntersectionObserver(this);
//返回節點觀察到對象

選擇參照區域
.relativeTo(selector,[margins])//選擇某個節點區域作為參照物
或
relativeToViewport([margins])//選擇視圖置為參照物

其中：margins：用來擴展（或收縮）參照節點布局區域的邊界

其中：margins：用來擴展（或收縮）參照節點布局區域的邊界

選擇觀察者，并且開始監聽
.observe(string targetSelector, function callback)

停止監聽：
.disconnect()

以上是“微信小程序中怎么查WXML節點信息”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！