• 下载
  • 社区

my.createSelectorQuery

版本要求:基础库版本 1.4.0 更高版本,低版本需要做 兼容处理


返回一个 SelectorQuery 对象实例。

扫码体验

节点查询.jpeg


效果示例


节点查询.gif



SelectorQuery


示例代码


<!-- API-DEMO page/API/create-selector-query/create-selector-query.axml-->
<view class="page">
  <view class="page-description">节点查询 API</view>
  <view class="page-section">
    <view className="all">节点 all1</view>
    <view className="all">节点 all2</view>
    <view id="one">节点 one</view>
    <view id="scroll" style="height:200px;overflow: auto">
      <view style="height:400px">独立滚动区域</view>
    </view>
    <button type="primary" onTap="createSelectorQuery">节点查询</button>
  </view>
</view>


// API-DEMO page/API/create-selector-query/create-selector-query.js
Page({
  createSelectorQuery() {
    my.createSelectorQuery()
      .select('#non-exists').boundingClientRect()
      .select('#one').boundingClientRect()
      .selectAll('.all').boundingClientRect()
      .select('#scroll').scrollOffset()
      .selectViewport().boundingClientRect()
      .selectViewport().scrollOffset().exec((ret) => {
      console.log(ret);
      my.alert({
        content: JSON.stringify(ret, null, 2),
      });
    })
  },
});


ret 结构


[
  null,
  {
    "x": 1,
    "y": 2,
    "width": 1367,
    "height": 18,
    "top": 2,
    "right": 1368,
    "bottom": 20,
    "left": 1
  },
  [
    {
      "x": 1,
      "y": -34,
      "width": 1367,
      "height": 18,
      "top": -34,
      "right": 1368,
      "bottom": -16,
      "left": 1
    },
    {
      "x": 1,
      "y": -16,
      "width": 1367,
      "height": 18,
      "top": -16,
      "right": 1368,
      "bottom": 2,
      "left": 1
    }
  ],
  {
    "scrollTop": 0,
    "scrollLeft": 0
  },
  {
    "width": 1384,
    "height": 360
  },
  {
    "scrollTop": 35,
    "scrollLeft": 0
  }
]