tt.createSelectorQuery

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

返回一個 selectorQuery 對象實例。

輸出

SelectorQuery

代碼示例

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

SelectorQuery 對象

SelectorQuery 對象的方法列表

selectorQuery.in

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

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

select

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

selectAll

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

selectViewport

選擇顯示區(qū)域。可用于獲取顯示區(qū)域的尺寸、滾動位置等信息。

exec

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

NodesRef 對象

nodesRef.boundingClientRect

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

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

nodesRef.scrollOffset

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

返回參數(shù):

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

nodesRef.fields

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

返回參數(shù)：

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