今日頭條小程序nodesreffields

小編:啊南 39閱讀 2020.12.16

NodesRef.fields

添加節點的相關信息的查詢,在 fields 中指定需要獲取的字段。

語法
nodesRef.fields(fields[, callback])
參數說明object fields

對象類型,屬性如下:

屬性名 類型 默認值 必填 說明 最低支持版本
id boolean false 是否返回節點的 ID 1.7.0
dataset boolean false 是否返回節點的 dataset 1.7.0
rect boolean false 是否返回節點布局位置(left right top bottom) 1.7.0
size boolean false 是否返回節點尺寸(width height) 1.7.0
scrollOffset boolean false 是否返回節點的滾動位置信息(scrollLeft scrollTop),節點必須是scroll-view或者viewport 1.7.0
node boolean false 是否返回節點對應的 Node 實例,當前僅支持新方案 canvas 實例的獲取 1.78.0

注:新方案 canvas 是指定了合法的 type 屬性的 canvas 組件,詳細見 canvas 組件 文檔。

function callback

回調函數(可選)。

回調函數接受的第一個參數為 object 類型,代表查詢結果,屬性如下:

參數 參數類型 說明
id string 節點的 ID
dataset object 節點的 dataset
left number 節點的左邊界坐標
right number 節點的右邊界坐標
top number 節點的上邊界坐標
bottom number 節點的下邊界坐標
width number 節點的寬度
height number 節點的高度
scrollLeft number 節點的水平滾動位置
scrollTop number 節點的豎直滾動位置
返回值

SelectorQuery

掃碼體驗

請使用字節宿主APP掃碼

代碼示例

開發者工具中預覽

JavaScript

<button id="myButton" data-key="bytedance" type="primary" size="default" bindtap="getButton">  獲取當前button實例</button><button type="primary" size="default" bindtap="getCanvas">獲取 canvas實例</button><canvas type="2d" id="myCanvas"></canvas><view>{{componentInfo}}</view>
let canvas, canvasCtx;Page({  data: {    componentInfo: "",  },  onReady() {    const query = tt.createSelectorQuery();    query      .select("#myCanvas")      .fields({        node: true,      })      .exec((res) => {        canvas = res[0].node;        canvasCtx = canvas.getContext("2d");        canvasCtx.font = "20px Georgia";        canvasCtx.fillStyle = "red";        canvasCtx.fillText("byteDance", 0, 50);      });  },  getButton() {    tt.createSelectorQuery()      .select("#myButton")      .fields({        id: true,        dataset: true,        rect: true,        size: true,        scrollOffset: true,      })      .exec((res) => {        const buttonNode = res[0];        console.log(buttonNode);        const {          id, // 節點的 ID          dataset, // 節點的 dataset          left, // 節點的左邊界坐標          right, // 節點的右邊界坐標          top, // 節點的上邊界坐標          bottom, // 節點的下邊界坐標          width, // 節點的寬度          height, // 節點的高度          scrollLeft, // 節點的水平滾動位置          scrollTop, // 節點的豎直滾動位置        } = buttonNode;        const buttonInfo = `當前button的信息:id: ${id}; width: ${width}px, height: ${height}px; 位置信息:top: ${top}px, left: ${left}px, bottom: ${bottom}px, right: ${right}px; data: ${JSON.stringify(          dataset,        )}`;        this.setData({          componentInfo: buttonInfo,        });      });  },  getCanvas() {    tt.createSelectorQuery()      .select("#myCanvas")      .fields({        node: true,      })      .exec((res) => {        const canvasNode = res[0];        const canvasInfo = `canvas 類型: ${canvasNode.nodeCanvasType};`;        this.setData({          componentInfo: canvasInfo,        });      });  },});
關聯標簽:
欧美色欧美亚洲高清在线视频_欧美牲交aⅴ人妖_欧美牲交av免费