uniapp的节点查询器

创建节点查询器

//将选择器的选取范围更改为自定义组件 component 内，返回一个 SelectorQuery 对象实例
 const query = uni.createSelectorQuery().in(this)

selectorQuery.select(selector)

//在当前页面下选择第一个匹配选择器 selector 的节点，返回一个 NodesRef 对象实例，可以用于获取节点信息
  query.select(`#city-letter-${id === '#' ? '0' : id}`)

selector说明

selector 类似于 CSS 的选择器，但仅支持下列语法
ID选择器：#the-id
class选择器（可以连续指定多个）：.a-class.another-class
子元素选择器：.the-parent > .the-child
后代选择器：.the-ancestor .the-descendant
跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant
多选择器的并集：#a-node, .some-other-nodes

boundingClientRect

添加节点的布局位置的查询请求
 query.select(`#city-letter-${id === '#' ? '0' : id}`)
          .boundingClientRect(data => {
            // console.log("得到布局位置信息" + JSON.stringify(data));
            // console.log("节点离页面顶部的距离为" + data.top);
            data ? (that.scrollTop = data.top) : void 0
          })
          .exec()
      }, 0)