众所周知,在微信小程序中是没有DOM树的。但是有些需求的实现,没有DOM操作是很难完成的。这里就引出了微信小程序的节点选择器!
例子:在之前小程序开发中,有这么一个需求——二级联动菜单(
点击左侧一级分类,右侧二级分类会滚动到该一级分类的位置;滑动二级分类经过某个一级分类时,左侧一级分类也跟着切换至该类目下
)
技术点:点击一级分类与滑动二级分类时,需要实时掌握当前二级分类滑动至哪个位置。但是分类类目为动态加载,高度、距离顶部距离等信息不确定,这是就需要动态获取该节点的各项信息。
问题:微信小程序没有DOM树,无法获取该元素的详细信息。
解决:使用微信小程序节点选择器(
代码:
const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function (res) {
console.log(res) //res中有该节点的详细信息
})
官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/wx.createSelectorQuery.html
)
网友评论