踩坑(2)-代替DOM操作,微信小程序节点选择器!

众所周知,在微信小程序中是没有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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容