先看官方文档给出的说明

查询节点信息的对象,返回一个SelectorQuery对象实例\color{#9a2323}{查询节点信息的对象,返回一个 SelectorQuery 对象实例}查询节点信息的对象,返回一个SelectorQuery对象实例

拿到实例后再看上边挂载的方法

SelectorQuery.in (设置选取范围)
SelectorQuery.select (选择节点 | 页面中匹配到的第一个)
SelectorQuery.selectAll (选择当前页面下匹配选择器的所有节点)
SelectorQuery.selectViewport (获取显示区域的尺寸、滚动位置等信息)
SelectorQuery.exec (执行所有的请求，请求结果按请求次序构成数组)

多看文档在微信这里好像不太行的样子
所以还是直接建个demo吧，以一个盒子滑动到顶部吸顶为需求。
实现步骤为通过 wx.createSelectorQuery 获取元素在页面中的高度，页面滑动的时候通过微信提供的 onPageScroll 方法，获取当前页面的滚动高度。到达阈值后 setData

index.wxml

<view id="fixed-content" class="fixed-box {{ isFixed ? 'stick' : '' }}"><text>{{ isFixed ? '吸顶啦' : '元素滑动至tab栏时吸顶' }}</text>
</view>

index.js

page({onLoad () {this.queryFixedElementInfo();},// 查询吸顶元素高度queryFixedElementInfo () {// 获取一个 'SelectorQuery' 实例const query = wx.createSelectorQuery();// 选择 id 为 'fixed-content' 的页面元素，查询其布局位置query.select('#fixed-content').boundingClientRect();// empty-element 选择的是一个页面并不存在的节点，同样发起一个查询，写在这里只是想提醒下看代码片段的各位，对于不能确定的数据，在取值的时候尽量给个默认值，或者判断数据类型后再进行对应的操作，以免操作不当报错，影响后续的逻辑// 实际应用场景可能为，使用 wx:if 控制的元素，在查询时未渲染query.select('#empty-element').boundingClientRect();// 官方注解: '执行所有的请求 ***请求结果按请求次序构成数组*** 在callback的第一个参数中返回。'query.exec(res => {const [ fixedElement, emptyElement ] = res;// 第一项为查询页面节点 '#fixed-content' 的返回值，const { bottom, dataset, height, left, right, top, width } = fixedElement || {};// 查询对象中元素自身的宽高console.log(`%c 查询元素的宽高：${width} * ${height}`, 'color: #282C34');/*** top 为距顶部距离， bottom为元素底部距顶部的距离* 这块可以自己调整元素在界面中的位置* bottom - top === height;* console.log(bottom - top === height); // true*/console.log(`%c 查询元素相对视图的边界坐标\n上：${top}\n下：${bottom}\n左：${left}\n右：${right}`, 'color: #a52222');// 查询元素中携带的自定义属性console.dir(dataset);// 因为第二条并不存在于页面中，所以也没有返回值，从里边取值的时候记得给个默认值const { id } = emptyElement || {};console.log(`%c 以解构方式取到的值为：${id}, 但是不会报错，需要的话可以在解构的时候赋个默认值`, 'color: red');/** 以下写法会报错，影响后续的业务逻辑  */// console.log(res[1].id || emptyElement.id);// do sth...// 记录 '#fixed-content' 距离顶部的距离this.setData({ fixedTop: top });});},// 页面滑动事件onPageScroll (e) {const { scrollTop } = e;const { fixedTop, isFixed } = this.data;if (scrollTop >= fixedTop && !isFixed) {this.setData({ isFixed: true });return;}if (scrollTop < fixedTop && isFixed) {this.setData({ isFixed: false });return;}},
}

.select & .selectAll

传入一个选择器，选择器格式参考文档
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

.selectViewport

返回一个获取wxml节点信息的对象，包含的方法官方文档有列出
微信官方文档 | NodesRef

.exec

可以看到使用 exec 时如文档所说将所有的请求执行，然后返回结果是一个数组，顺序为发起请求的顺序。
有些条件下可能会出现查询元素并不在界面上的情况，所以对应的返回值为 null，如果这时直接以对象的方式去取值，则会报错，影响后续代码的执行。所以在使用时请记得考虑为空的情况

————————手动的分割线—————————————————————————

Last

其实开始是想把 wx.createSelectorQuery 和 wx.createIntersectionObserver 放在一起，弄个代码片段贴上来就好，不做细分了，但是想了下对初接触的可能不太友好，所以在blog里拆开。这里再挂上揉在一起的小程序代码片段吧，可以对比或者调试，这样可能更方便去理解这个东西

微信开发者工具 | 代码片段地址

微信小程序(四) 节点查询 | wx.createSelectorQuery相关推荐

微信小程序云开发查询数据库结果为空
微信小程序云开发查询数据库结果为空问题描述: 先上代码: getNotice : function(){var that = thisconst db = wx.cloud.database()db ...
微信小程序实战—快递查询
微信小程序实战-快递查询案例需求:输入快递单号,点击查询按钮即可查看快递信息 api:阿里云全国快递物流查询关键代码: 数据定义(index.js) data: {motto: 'Hello Wo ...
微信小程序四种弹窗方式
微信小程序弹窗一.wx.showToast(Object object) 二 .wx.showModal(Object object) 三.wx.showLoading(Object object) ...
微信小程序实现条件查询示例
微信小程序实现条件查询示例 index.js //index.js //获取应用实例 const app = getApp() const db = wx.cloud.database(); cons ...
微信小程序四种父子相互传值方式
微信小程序四种父子相互传值方式 1. 绑定自定义属性(父传子),触发自定义方法 (子传父) 原生微信小程序+uni-app都可以实现父组件: <template><view cla ...
微信小程序-API-数据缓存-wx.setStorageSync
微信小程序-API-数据缓存-wx.setStorageSync-2020-2-18 存 wx.setStorageSync('openid', openid); //将openid存入本地缓存取 ...
微信小程序设置请求超时wx.request等，简单易懂！
微信小程序设置请求超时wx.request等一.用到的方法: 个人理解,比较粗糙看不懂可以百度一下具体用法 new Promise:new了一个函数或者方法,可以被Promise.race等方法调 ...
微信小程序使用物流查询插件
微信小程序使用物流查询插件文章目录微信小程序使用物流查询插件添加插件添加成功使用方式声明使用插件引入插件包效果图物流查询插件添加插件登录微信公众平台后台->设置->第 ...
微信小程序登录流程+介绍wx.login和auth.code2Session
微信小程序登录流程+介绍wx.login和auth.code2Session 几个核心API和核心字段 wx.login() 调用接口获取登录凭证(code) code2Session 登录凭证校验, ...

微信小程序(四) 节点查询 | wx.createSelectorQuery

.select & .selectAll

.selectViewport

.exec

Last

微信小程序(四) 节点查询 | wx.createSelectorQuery相关推荐

最新文章

热门文章