微信小程序(四) 节点查询 | wx.createSelectorQuery-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序(四) 节点查询 | wx.createSelectorQuery。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

先看官方文档给出的说明

$\color{#9a2323}{查询节点信息的对象,返回一个 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里拆开。这里再挂上揉在一起的小程序代码片段吧，可以对比或者调试，这样可能更方便去理解这个东西

微信开发者工具 | 代码片段地址文章来源地址https://www.toymoban.com/news/detail-502594.html

到了这里，关于微信小程序(四) 节点查询 | wx.createSelectorQuery的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！