全部产品
云市场

节点查询

更新时间:2019-09-09 15:11:59

my.createSelectorQuery

说明:基础库 1.4.0 及以上版本,mPaaS 10.1.32 及以上版本支持该接口。

获取一个节点查询对象 SelectorQuery

参数说明

参数名 类型 说明
params object 可以指定 page 属性,默认为当前页面。

SelectorQuery

节点查询对象类,包含以下方法:

selectorQuery.select(selector)

选择当前第一个匹配选择器的节点,选择器支持 ID 选择器以及 class 选择器。

selectorQuery.selectAll(selector)

选择所有匹配选择器的节点,选择器支持 ID 选择器以及 class 选择器。

selectorQuery.selectViewport()

选择窗口对象。

selectorQuery.boundingClientRect()

将当前选择节点的位置信息放入查询结果,类似 dom 的 getBoundingClientRect, 返回对象包含 width、height、left、top、bottom、right。如果当前节点为窗口对象,则只返回 width、height。

selectorQuery.scrollOffset()

将当前选择节点的滚动信息放入查询结果,返回对象包含 scrollTop、scrollLeft。

selectorQuery.exec(callback)

将查询结果放入 callback 回调中。查询结果为数组,每项为一次查询的结果,如果当前是节点列表,则单次查询结果也为数组。注意,exec 必须放到 Page onReady 后调用。

代码示例

  1. <view className="all">节点 all1</view>
  2. <view className="all">节点 all2</view>
  3. <view id="one">节点 one</view>
  4. <view id="scroll" style="height:200px;overflow: auto">
  5. <view style="height:400px">独立滚动区域</view>
  6. </view>
  1. Page({
  2. onReady() {
  3. my.createSelectorQuery()
  4. .select('#non-exists').boundingClientRect()
  5. .select('#one').boundingClientRect()
  6. .selectAll('.all').boundingClientRect()
  7. .select('#scroll').scrollOffset()
  8. .selectViewport().boundingClientRect()
  9. .selectViewport().scrollOffset().exec((ret) => {
  10. console.log(JSON.stringify(ret, null, 2));
  11. });
  12. },
  13. });

结果 ret:

  1. [
  2. null,
  3. {
  4. "x": 1,
  5. "y": 2,
  6. "width": 1367,
  7. "height": 18,
  8. "top": 2,
  9. "right": 1368,
  10. "bottom": 20,
  11. "left": 1
  12. },
  13. [
  14. {
  15. "x": 1,
  16. "y": -34,
  17. "width": 1367,
  18. "height": 18,
  19. "top": -34,
  20. "right": 1368,
  21. "bottom": -16,
  22. "left": 1
  23. },
  24. {
  25. "x": 1,
  26. "y": -16,
  27. "width": 1367,
  28. "height": 18,
  29. "top": -16,
  30. "right": 1368,
  31. "bottom": 2,
  32. "left": 1
  33. }
  34. ],
  35. {
  36. "scrollTop": 0,
  37. "scrollLeft": 0
  38. },
  39. {
  40. "width": 1384,
  41. "height": 360
  42. },
  43. {
  44. "scrollTop": 35,
  45. "scrollLeft": 0
  46. }
  47. ]