微信小程序 WXML節(jié)點信息查詢詳解
1、節(jié)點信息查詢
const query = wx.createSelectorQuery();//【返回節(jié)點查詢對象:SelectorQuery】 //組件內(nèi),則用this.createSelectorQuery();或者query .in(this);
節(jié)點查詢對象:SelectorQuery .in(this) //限定范圍為自身組件,返回【節(jié)點查詢對象】(所以可以和下面的方法,點連調(diào)用) .exec(function callback) //執(zhí)行查詢 //根據(jù)str選擇器查詢,或者查詢視窗?!痉祷毓?jié)點對象:NodesRef】 .select(selector) //根據(jù)選擇器str查詢,返回一個匹配 .selectAll(selector) //根據(jù)選擇器str查詢,返回所有匹配 .selectViewport()//選擇顯示區(qū)域
節(jié)點對象:NodesRef //執(zhí)行底下請求后,返回SelectorQuery對象。 .fields({//這個是常規(guī)查詢,你想要查詢的信息,配置好,就可以查詢。底下還有細分的某一類查詢。 id:true,//這兩個以下細分節(jié)點查詢都會有這個返回 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)//相對于顯示區(qū)域,以像素為單位 //返回節(jié)點,相當于視圖的(左上為原點)四個邊的邊界像素。及寬高。及dataset //相當于:id:true, dataset:true,rect:true,size:true, .scrollOffset(function callback)//添加節(jié)點的滾動位置查詢請求。以像素為單位。節(jié)點必須是 scroll-view 或者 viewport //相當于 id:true,dataset:true, .context(function callback)//添加節(jié)點的 Context 對象查詢請求。 目前支持 VideoContext、CanvasContext、LivePlayerContext 和 MapContext 的獲取
總結(jié):
第一步,返回節(jié)點查詢對象:
const query = wx.createSelectorQuery();
第二步,查詢對象執(zhí)行查詢,返回節(jié)點對象:
query .in(this);//返回節(jié)點查詢對象【如果要限定組件范圍則需要】
select(selector)/selectAll(selector)/selectViewport()
.
第三步,節(jié)點對象配置需要的節(jié)點信息,返回查詢對象:
fields()/boundingClientRect()/scrollOffset()/context()
第四步,查詢對象執(zhí)行查詢:
exec(function callback)
說明:function callback,可以放在exec。也可以放在boundingClientRect()/scrollOffset()/context()
但如果像fields().。只能放在exec
2、節(jié)點相交狀態(tài)查詢
wx.createIntersectionObserver();//組件用:wx.createIntersectionObserver(this); //返回節(jié)點觀察到對象
選擇參照區(qū)域 .relativeTo(selector,[margins])//選擇某個節(jié)點區(qū)域作為參照物 或 relativeToViewport([margins])//選擇視圖置為參照物 其中:margins:用來擴展(或收縮)參照節(jié)點布局區(qū)域的邊界
其中:margins:用來擴展(或收縮)參照節(jié)點布局區(qū)域的邊界
選擇觀察者,并且開始監(jiān)聽 .observe(string targetSelector, function callback)
停止監(jiān)聽: .disconnect()
總結(jié):
可以實現(xiàn)吸附等功能
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS 判斷某變量是否為某數(shù)組中的一個值的3種方法(總結(jié))
下面小編就為大家?guī)硪黄狫S 判斷某變量是否為某數(shù)組中的一個值的3種方法(總結(jié))。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07layui table 復(fù)選框跳頁后再回來保持原來選中的狀態(tài)示例
今天小編就為大家分享一篇layui table 復(fù)選框跳頁后再回來保持原來選中的狀態(tài)示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10JavaScript變量聲明的var、let、const詳解
JavaScript中的變量是松散類型的,可以保存任何類型數(shù)據(jù),變量只不過是一個名稱,下面這篇文章主要給大家介紹了關(guān)于JavaScript變量聲明的var、let、const的相關(guān)資料,需要的朋友可以參考下2022-07-07