亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序 WXML節(jié)點(diǎn)信息查詢詳解

 更新時間:2019年07月29日 11:20:47   作者:心之所向_16a2  
這篇文章主要介紹了微信小程序 WXML節(jié)點(diǎn)信息查詢詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

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

const query = wx.createSelectorQuery();//【返回節(jié)點(diǎn)查詢對象:SelectorQuery】
//組件內(nèi),則用this.createSelectorQuery();或者query .in(this);
節(jié)點(diǎn)查詢對象:SelectorQuery
.in(this) //限定范圍為自身組件,返回【節(jié)點(diǎn)查詢對象】(所以可以和下面的方法,點(diǎn)連調(diào)用)
.exec(function callback) //執(zhí)行查詢

//根據(jù)str選擇器查詢,或者查詢視窗?!痉祷毓?jié)點(diǎn)對象:NodesRef】
.select(selector) //根據(jù)選擇器str查詢,返回一個匹配
.selectAll(selector) //根據(jù)選擇器str查詢,返回所有匹配
.selectViewport()//選擇顯示區(qū)域
節(jié)點(diǎn)對象:NodesRef
//執(zhí)行底下請求后,返回SelectorQuery對象。
.fields({//這個是常規(guī)查詢,你想要查詢的信息,配置好,就可以查詢。底下還有細(xì)分的某一類查詢。
 id:true,//這兩個以下細(xì)分節(jié)點(diǎn)查詢都會有這個返回
 dataset:true,

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

 scrollOffset:true,//這個包括,id,dataset。相當(dāng)于scrollOffset查詢

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

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


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

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

總結(jié):

第一步,返回節(jié)點(diǎn)查詢對象:

const query = wx.createSelectorQuery();

第二步,查詢對象執(zhí)行查詢,返回節(jié)點(diǎn)對象:

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

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

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

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

第四步,查詢對象執(zhí)行查詢:

exec(function callback)

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

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

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

wx.createIntersectionObserver();//組件用:wx.createIntersectionObserver(this);
//返回節(jié)點(diǎn)觀察到對象
選擇參照區(qū)域
.relativeTo(selector,[margins])//選擇某個節(jié)點(diǎn)區(qū)域作為參照物
或
relativeToViewport([margins])//選擇視圖置為參照物

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

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

選擇觀察者,并且開始監(jiān)聽
.observe(string targetSelector, function callback)
停止監(jiān)聽:
.disconnect()

總結(jié):

可以實(shí)現(xiàn)吸附等功能

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論