用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

:微信小程序之SelectorQuery

巴黎彩票计划 www.hknsi.icu Rolan 2019-5-16 00:12

在開發小程序展開全文組件時需要用到節點查詢API - wx.createSelectorQuery() 來查詢全文內容的高度。wx.createSelectorQuery() 返回一個 SelectorQuery 對象實例。SelectorQuery 有五個方法(in,select,selectAll ...

在開發巴黎彩票计划展開全文組件時需要用到節點查詢API - wx.createSelectorQuery() 來查詢全文內容的高度。

wx.createSelectorQuery() 返回一個 SelectorQuery 對象實例。

SelectorQuery 有五個方法(in,select,selectAll,selectViewport,exec),第一個返回 SelectorQuery,后四個返回 NodesRef。

NodesRef 有四個方法(fields,boundingClientRect,scrollOffset,context),第一個返回 NodesRef,后三個返回 SelectorQuery。

對照官方提供的示例代碼來看

const query = wx.createSelectorQuery() // query 是 SelectorQuery 對象
query.select('#the-id').boundingClientRect() // select 后是 NodesRef 對象,然后 boundingClientRect 返回 SelectorQuery 對象
query.selectViewport().scrollOffset() // selectViewport 后是 NodesRef 對象,然后 scrollOffset 返回 SelectorQuery 對象
query.exec(function (res) { // exec 返回 NodesRef 對象
  res[0].top // #the-id節點的上邊界坐標
  res[1].scrollTop // 顯示區域的豎直滾動位置
})

問題:每行執行返回的 SelectorQuery 對象是相同的嗎?

答案:是的,都是同一個對象。

問題:直接執行 query.select('#the-id').boundingClientRect().exec 也可以嗎?

答案:可以,boundingClientRect() 返回就是 query。

問題:這樣連寫 query.select('#the-id').boundingClientRect().selectViewport().scrollOffset() 算兩條查詢請求嗎?

答案:是兩條請求。

問題:query.exec 執行后會清空前面的查詢請求嗎?再次執行還能拿到結果嗎?

答案:可以,query不會清空請求。

問題:boundingClientRect 和 scrollOffset 可以接受 callback 參數,它與 query.exec 執行順序是怎樣,修改 res 結果會影響到后面的 callback 嗎?

答案:先執行 boundingClientRect 和 scrollOffset 的 callback,再執行 query.exec 的 callback;修改 res 結果會影響到后面 exec 的結果。

上面的問題通過 WAService.js 源碼簡單美化后可以了解 SelectorQuery 的代碼邏輯

class NodesRef {
  constructor(selectorQuery, component, selector, single) {
    this._selectorQuery = selectorQuery;
    this._component = component;
    this._selector = selector;
    this._single = single;
  }
  fields(e, t) {
    this._selectorQuery._push(this._selector, this._component, this._single,
      e,
      t,
    );
    return this._selectorQuery
  }
  boundingClientRect(callback) {
    this._selectorQuery._push( this._selector, this._component, this._single,
      {
        id: true,
        dataset: true,
        rect: true,
        size: true,
      },
      callback,
    );
    return this._selectorQuery;
  }
  scrollOffset(callback) {
    this._selectorQuery._push( this._selector, this._component, this._single,
      {
        id: true,
        dataset: true,
        scrollOffset: true,
      },
      callback,
    );
    return this._selectorQuery;
  }
}

let pluginId = '';
class SelectorQuery {
  constructor(e) {
    if (e && e.page) {
      this._component = this._defaultComponent = e.page;
      this._webviewId = this._defaultComponent.__wxWebviewId__;
    } else {
      var pages = __internalGlobal__.getCurrentPagesByDomain('');
      this._defaultComponent = pages[pages.length - 1],
      this._component = null;
      this._webviewId = null;
    }
    this._queue = [];
    this._queueCb = [];
  }
  in(component) {
    if (!this._webviewId) {
      this._webviewId = component.__wxWebviewId__;
      this._component = component;
    } else if (this._webviewId !== component.__wxWebviewId__) {
      console.error('A single SelectorQuery could not work in components in different pages. A SelectorQuery#in call has been ignored.');
    } else {
      this._component = component;
    }
    return this;
  }
  select(selector) {
    return new NodesRef(this, this._component, selector, true);
  }
  selectAll(selector) {
    return new NodesRef(this, this._component, selector, false);
  }
  selectViewport() {
    return new NodesRef(this, 0, '', true);
  }
  _push(selector, component, single, fields, callback) {
    if (!this._webviewId) {
      this._webviewId = this._defaultComponent ? this._defaultComponent.__wxWebviewId__ : undefined;
    }
    const rootNodeId = pluginId ? '' : r.getRootNodeId(this._webviewId);
    this._queue.push({
      component: null != component ? (0 === component ? 0 : component.__wxExparserNodeId__) : rootNodeId,
      selector,
      single,
      fields,
    });
    this._queueCb.push(callback || null);
  }
  exec(callback) {
    hd(this._webviewId, {
      pluginId,
      queue: this._queue,
    }, (results) => {
      const queueCb = this._queueCb;
      results.forEach((res, index) => {
        if ('function' == typeof queueCb[index]) {
          queueCb[index].call(this, res);
        }
      });
      if ('function' == typeof callback) {
        callback.call(this, results);
      }
    })
  }
}
分享至 : QQ空間
收藏
原作者: IMWeb howenhuo 來自: IMWeb
ig飞艇人工计划软件 北京pk10官方投注平台 幸运飞艇在线单期计划 北京pk拾稳赚技巧 腾讯分分彩后三组选包胆计划 极速pk10技巧 手机炸金花怎么才能赢 七乐彩走势图表近50期 pt电子游戏官网 新加坡赌场押大小技巧 时时彩大小单双定位计划 彩神计划下载 北京pk拾开奖直播 欢乐麻将二人麻将诀窍 赌场大小的玩法介绍 北京pk走势图