眾所周知署浩,在微信小程序中是沒有DOM樹的。但是有些需求的實現(xiàn)扫尺,沒有DOM操作是很難完成的筋栋。這里就引出了微信小程序的節(jié)點選擇器!
例子:在之前小程序開發(fā)中器联,有這么一個需求——二級聯(lián)動菜單(
? ? ? ? ? 點擊左側(cè)一級分類二汛,右側(cè)二級分類會滾動到該一級分類的位置;滑動二級分類經(jīng)過某個一級分類時拨拓,左側(cè)一級分類也跟著切換至該類目下
? ? ? ? )
技術(shù)點:點擊一級分類與滑動二級分類時肴颊,需要實時掌握當前二級分類滑動至哪個位置。但是分類類目為動態(tài)加載渣磷,高度婿着、距離頂部距離等信息不確定,這是就需要動態(tài)獲取該節(jié)點的各項信息醋界。
問題:微信小程序沒有DOM樹竟宋,無法獲取該元素的詳細信息。
解決:使用微信小程序節(jié)點選擇器(
代碼:
? ? ? ? const query = wx.createSelectorQuery()
? ? ? ? query.select('#the-id').boundingClientRect()
? ? ? ? query.selectViewport().scrollOffset()
? ? ? ? query.exec(function (res) {
? ? ? ? ? ? console.log(res) //res中有該節(jié)點的詳細信息
? ? ? })
官方文檔:https://developers.weixin.qq.com/miniprogram/dev/api/wx.createSelectorQuery.html
)