tt.createSelectorQuery

基礎(chǔ)庫(kù) 1.7.0 開始支持本方法，低版本需做兼容處理。

返回一個(gè) selectorQuery 對(duì)象實(shí)例。

輸出

SelectorQuery

代碼示例

const query = tt.createSelectorQuery();
query.select("#the-id").boundingClientRect();
query.selectViewport().scrollOffset();
query.exec(function(res) {
  res[0].top; // #the-id節(jié)點(diǎn)的上邊界坐標(biāo)
  res[1].scrollTop; // 顯示區(qū)域的豎直滾動(dòng)位置
});

SelectorQuery 對(duì)象

SelectorQuery 對(duì)象的方法列表

selectorQuery.in

將選擇器的選取范圍更改為自定義組件 component 內(nèi)（初始時(shí)，選擇器僅選取頁(yè)面范圍的節(jié)點(diǎn)，不會(huì)選取任何自定義組件中的節(jié)點(diǎn)）。

Component({
  queryMultipleNodes() {
    const query = tt.createSelectorQuery().in(this);
    query
      .select("#the-id")
      .boundingClientRect(function(res) {
        res.top; // 這個(gè)組件內(nèi) #the-id 節(jié)點(diǎn)的上邊界坐標(biāo)
      })
      .exec();
  }
});

select

在當(dāng)前頁(yè)面下選擇第一個(gè)匹配選擇器 selector 的節(jié)點(diǎn)，返回一個(gè) NodesRef 對(duì)象實(shí)例，可以用于獲取節(jié)點(diǎn)信息。

selectAll

在當(dāng)前頁(yè)面下選擇匹配選擇器 selector 的所有節(jié)點(diǎn)，返回一個(gè) NodesRef 對(duì)象實(shí)例，可以用于獲取節(jié)點(diǎn)信息。

selectViewport

選擇顯示區(qū)域?？捎糜讷@取顯示區(qū)域的尺寸、滾動(dòng)位置等信息。

exec

執(zhí)行所有的請(qǐng)求。請(qǐng)求結(jié)果按請(qǐng)求次序構(gòu)成數(shù)組，在 callback 的第一個(gè)參數(shù)中返回。

NodesRef 對(duì)象

nodesRef.boundingClientRect

添加節(jié)點(diǎn)的布局位置的查詢請(qǐng)求。相對(duì)于顯示區(qū)域，以像素為單位。其功能類似于 DOM 的 getBoundingClientRect。返回 nodesRef 對(duì)應(yīng)的 SelectorQuery。如果提供了 callback 回調(diào)函數(shù)，在執(zhí)行 selectQuery.exec 方法后，節(jié)點(diǎn)信息會(huì)在 callback 中返回。

Page({
  getRect() {
    tt.createSelectorQuery()
      .select("#the-id")
      .boundingClientRect(function(rect) {
        rect.id; // 節(jié)點(diǎn)的ID
        rect.dataset; // 節(jié)點(diǎn)的dataset
        rect.left; // 節(jié)點(diǎn)的左邊界坐標(biāo)
        rect.right; // 節(jié)點(diǎn)的右邊界坐標(biāo)
        rect.top; // 節(jié)點(diǎn)的上邊界坐標(biāo)
        rect.bottom; // 節(jié)點(diǎn)的下邊界坐標(biāo)
        rect.width; // 節(jié)點(diǎn)的寬度
        rect.height; // 節(jié)點(diǎn)的高度
      })
      .exec();
  },
  getAllRects() {
    tt.createSelectorQuery()
      .selectAll(".class-name")
      .boundingClientRect(function(rects) {
        rects.forEach(function(rect) {
          rect.id; // 節(jié)點(diǎn)的ID
          rect.dataset; // 節(jié)點(diǎn)的dataset
          rect.left; // 節(jié)點(diǎn)的左邊界坐標(biāo)
          rect.right; // 節(jié)點(diǎn)的右邊界坐標(biāo)
          rect.top; // 節(jié)點(diǎn)的上邊界坐標(biāo)
          rect.bottom; // 節(jié)點(diǎn)的下邊界坐標(biāo)
          rect.width; // 節(jié)點(diǎn)的寬度
          rect.height; // 節(jié)點(diǎn)的高度
        });
      })
      .exec();
  }
});

nodesRef.scrollOffset

添加節(jié)點(diǎn)的滾動(dòng)位置查詢請(qǐng)求。以像素為單位。節(jié)點(diǎn)必須是 scroll-view 或者 viewport，返回 nodesRef 對(duì)應(yīng)的 SelectorQuery。

返回參數(shù):

Page({
  getScrollOffset: function() {
    tt.createSelectorQuery()
      .selectViewport()
      .scrollOffset(function(res) {
        res.id; // 節(jié)點(diǎn)的ID
        res.dataset; // 節(jié)點(diǎn)的dataset
        res.scrollLeft; // 節(jié)點(diǎn)的水平滾動(dòng)位置
        res.scrollTop; // 節(jié)點(diǎn)的豎直滾動(dòng)位置
      })
      .exec();
  }
});

nodesRef.fields

獲取節(jié)點(diǎn)的相關(guān)信息。需要獲取的字段在 fields 中指定。返回值是 nodesRef 對(duì)應(yīng)的 selectorQuery。

返回參數(shù)：

Page({
  getFields: function() {
    tt.createSelectorQuery()
      .select("#the-id")
      .fields(
        {
          id: true,
          dataset: true,
          size: true
        },
        function(res) {
          res.id; //節(jié)點(diǎn)的ID
          res.dataset; // 節(jié)點(diǎn)的dataset
          res.width; // 節(jié)點(diǎn)的寬度
          res.height; // 節(jié)點(diǎn)的高度
        }
      )
      .exec();
  }
});