先看官方文檔給出的說明

$查詢節(jié)點信息的對象,返回一個SelectorQuery對象實例$

拿到實例后再看上邊掛載的方法

• SelectorQuery.in (設置選取范圍)
• SelectorQuery.select (選擇節(jié)點 | 頁面中匹配到的第一個)
• SelectorQuery.selectAll (選擇當前頁面下匹配選擇器的所有節(jié)點)
• SelectorQuery.selectViewport (獲取顯示區(qū)域的尺寸、滾動位置等信息)
• SelectorQuery.exec (執(zhí)行所有的請求，請求結果按請求次序構成數(shù)組)

多看文檔在微信這里好像不太行的樣子
所以還是直接建個demo吧，以一個盒子滑動到頂部吸頂為需求。
實現(xiàn)步驟為通過 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 選擇的是一個頁面并不存在的節(jié)點，同樣發(fā)起一個查詢，寫在這里只是想提醒下看代碼片段的各位，對于不能確定的數(shù)據(jù)，在取值的時候盡量給個默認值，或者判斷數(shù)據(jù)類型后再進行對應的操作，以免操作不當報錯，影響后續(xù)的邏輯
	  // 實際應用場景可能為，使用 wx:if 控制的元素，在查詢時未渲染
	  query.select('#empty-element').boundingClientRect();
	
	  // 官方注解: '執(zhí)行所有的請求 ***請求結果按請求次序構成數(shù)組*** 在callback的第一個參數(shù)中返回。'
	  query.exec(res => {
	    const [ fixedElement, emptyElement ] = res;
	    
	    // 第一項為查詢頁面節(jié)點 '#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');
	    /** 以下寫法會報錯，影響后續(xù)的業(yè)務邏輯  */
	    // 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選擇器（可以連續(xù)指定多個）：.a-class.another-class
· 子元素選擇器：.the-parent > .the-child
· 后代選擇器：.the-ancestor .the-descendant
· 跨自定義組件的后代選擇器：.the-ancestor >>> .the-descendant
· 多選擇器的并集：#a-node, .some-other-nodes

.selectViewport

返回一個獲取wxml節(jié)點信息的對象，包含的方法官方文檔有列出
微信官方文檔 | NodesRef

.exec

可以看到使用 exec 時如文檔所說將所有的請求執(zhí)行，然后返回結果是一個數(shù)組，順序為發(fā)起請求的順序。
有些條件下可能會出現(xiàn)查詢元素并不在界面上的情況，所以對應的返回值為 null，如果這時直接以對象的方式去取值，則會報錯，影響后續(xù)代碼的執(zhí)行。所以在使用時請記得考慮為空的情況

————————手動的分割線—————————————————————————

Last

其實開始是想把 wx.createSelectorQuery 和 wx.createIntersectionObserver 放在一起，弄個代碼片段貼上來就好，不做細分了，但是想了下對初接觸的可能不太友好，所以在blog里拆開。這里再掛上揉在一起的小程序代碼片段吧，可以對比或者調試，這樣可能更方便去理解這個東西

微信開發(fā)者工具 | 代碼片段地址文章來源地址http://www.zghlxwxcb.cn/news/detail-502594.html

到了這里，關于微信小程序(四) 節(jié)點查詢 | wx.createSelectorQuery的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！