uniapp 获取页面dom元素的属性信息

uni.createSelectorQuery()

返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点,并使用 boundingClientRect 等方法选择需要查询的信息。

Tips:

  • 使用 uni.createSelectorQuery() 需要在生命周期 mounted 后进行调用。
  • 默认需要使用到 selectorQuery.in 方法。

SelectorQuery

查询节点信息的对象

selectorQuery.in(component)

将选择器的选取范围更改为自定义组件 component 内,返回一个 SelectorQuery 对象实例。(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点)。

代码示例

const query = uni.createSelectorQuery().in(this);
query.select('#id').boundingClientRect(data => {
  console.log("得到布局位置信息" + JSON.stringify(data));
  console.log("节点离页面顶部的距离为" + data.top);
}).exec();

注意

  • 支付宝小程序不支持in(component),使用无效果

selectorQuery.select(selector)

在当前页面下选择第一个匹配选择器 selector 的节点,返回一个 NodesRef 对象实例,可以用于获取节点信息。

selector 说明:

selector 类似于 CSS 的选择器,但仅支持下列语法。

  • ID选择器:#the-id
  • class选择器(可以连续指定多个):.a-class.another-class
  • 子元素选择器:.the-parent > .the-child
  • 后代选择器:.the-ancestor .the-descendant
  • 跨自定义组件的后代选择器:.the-ancestor >>> .the-descendant
  • 多选择器的并集:#a-node, .some-other-nodes

selectorQuery.selectAll(selector)

在当前页面下选择匹配选择器 selector 的所有节点,返回一个 NodesRef 对象实例,可以用于获取节点信息。

selectorQuery.selectViewport()

选择显示区域,可用于获取显示区域的尺寸、滚动位置等信息,返回一个 NodesRef 对象实例。

selectorQuery.exec(callback)

执行所有的请求。请求结果按请求次序构成数组,在callback的第一个参数中返回。

NodesRef

用于获取节点信息的对象

nodesRef.fields(object,callback)

获取节点的相关信息。第一个参数是节点相关信息配置(必选);第二参数是方法的回调函数,参数是指定的相关节点信息。

object 参数说明

字段名类型默认值必填说明平台差异说明
idBooleanfalse是否返回节点 id
datasetBooleanfalse是否返回节点 datasetApp、微信小程序、H5
rectBooleanfalse是否返回节点布局位置(left right top bottom
sizeBooleanfalse是否返回节点尺寸(width height
scrollOffsetBooleanfalse是否返回节点的 scrollLeft scrollTop,节点必须是 scroll-view 或者 viewport
propertiesArray<string>[]指定属性名列表,返回节点对应属性名的当前属性值(只能获得组件文档中标注的常规属性值,id class style 和事件绑定的属性值不可获取)仅 App 和微信小程序支持
computedStyleArray<string>[]指定样式名列表,返回节点对应样式名的当前值仅 App 和微信小程序支持
contextBooleanfalse是否返回节点对应的 Context 对象仅 App 和微信小程序支持

nodesRef.boundingClientRect(callback)

添加节点的布局位置的查询请求。相对于显示区域,以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery

callback 返回参数

属性类型说明
idString节点的 ID
datasetObject节点的 dataset
leftNumber节点的左边界坐标
rightNumber节点的右边界坐标
topNumber节点的上边界坐标
bottomNumber节点的下边界坐标
widthNumber节点的宽度
heightNumber节点的高度

nodesRef.scrollOffset(callback)

添加节点的滚动位置查询请求。以像素为单位。节点必须是 scroll-view 或者 viewport。返回 NodesRef 对应的 SelectorQuery

callback 返回参数

属性类型说明
idString节点的 ID
datasetObject节点的 dataset
scrollLeftNumber节点的水平滚动位置
scrollTopNumber节点的竖直滚动位置

nodesRef.context(callback)

添加节点的 Context 对象查询请求。支持 VideoContextCanvasContext、和 MapContext 等的获取。

平台差异说明

AppH5微信小程序支付宝小程序百度小程序字节跳动小程序、飞书小程序QQ小程序快手小程序
HBuilderX 2.4.7+xxx

callback 返回参数

属性类型说明
contextObject节点对应的 Context 对象

nodesRef.node(callback)

获取 Node 节点实例。目前支持 Canvas 的获取。

平台差异说明

AppH5微信小程序支付宝小程序百度小程序字节跳动小程序、飞书小程序QQ小程序快手小程序
xxxxx

callback 返回参数

属性类型说明
nodeObject节点对应的 Node 实例

注意

  • 目前仅能用于canvas
  • canvas需设置type="webgl"才能正常使用

代码示例

uni.createSelectorQuery().selectViewport().scrollOffset(res => {
  console.log("竖直滚动位置" + res.scrollTop);
}).exec();

let view = uni.createSelectorQuery().in(this).select(".test");

view.fields({
  size: true,
  scrollOffset: true
}, data => {
  console.log("得到节点信息" + JSON.stringify(data));
  console.log("节点的宽为" + data.width);
}).exec();

view.boundingClientRect(data => {
  console.log("得到布局位置信息" + JSON.stringify(data));
  console.log("节点离页面顶部的距离为" + data.top);
}).exec();

注意

  • nvue 暂不支持 uni.createSelectorQuery,暂时使用下面的方案
<template>
  <view class="wrapper">
    <view ref="box" class="box">
      <text class="info">Width: {{size.width}}</text>
      <text class="info">Height: {{size.height}}</text>
      <text class="info">Top: {{size.top}}</text>
      <text class="info">Bottom: {{size.bottom}}</text>
      <text class="info">Left: {{size.left}}</text>
      <text class="info">Right: {{size.right}}</text>
    </view>
  </view>
</template>

<script>
  // 注意平台差异
  // #ifdef APP-NVUE
  const dom = weex.requireModule('dom')
  // #endif

  export default {
    data () {
      return {
        size: {
          width: 0,
          height: 0,
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        }
      }
    },
    onReady () {
      const result = dom.getComponentRect(this.$refs.box, option => {
        console.log('getComponentRect:', option)
        this.size = option.size
      })
      console.log('return value:', result)
      console.log('viewport:', dom.getComponentRect('viewport'))
    }
  }
</script>

原创文章,作者:Uniapper,如若转载,请注明出处:https://www.uniapper.com/717.html

(14)
打赏 微信扫一扫 微信扫一扫
上一篇 2022年1月14日 上午12:11
下一篇 2022年1月14日 上午11:34

相关推荐

发表回复

登录后才能评论
欢迎访问www.uniapper.com!交流QQ群:35429521