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

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

作者: 地铁站的风 | 来源:发表于2019-02-19 12:44 被阅读0次

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

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/uyvxyqtx.html