微信小程序如何获取元素节点信息

2024年5月17日 143次阅读 来源: 矜媛宝

一、NodesRef 节点对象

1.1、NodesRef是什么？

NodesRef 用于获取 WXML 节点信息的对象

1.2、NodesRef具备的方法？

  • NodesRef.fields(Object fields)
    • 获取节点的相关信息
    • 获取节点的相关信息
  • NodesRef.boundingClientRect()
    • 添加节点的布局位置的查询请求
    • 相对于显示区域，以像素为单位
    • 功能类似于 DOM 的 getBoundingClientRect
  • NodesRef.scrollOffset()
    • 添加节点的滚动位置查询请求
    • 以像素为单位
    • 节点必须是 scroll-view 或者 viewport

二、SelectorQuery 查询节点信息的对象

1.1、 创建SelectorQuery查询对象

    let query = wx.createSelectorQuery()
复制代码

1.2、SelectorQuery方法

  • SelectorQuery.in (对应的组件)

    • 将选择器的选取范围更改为自定义组件 component 内
    • 初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点

  • SelectorQuery.select(string selector)

    • 在当前页面下选择第一个匹配选择器 selector 的节点

  • SelectorQuery.selectAll()

    • 在当前页面下选择匹配选择器 selector 的所有节点。

  • SelectorQuery.selectViewport()

    • 选择显示区域
    • 用于获取显示区域的尺寸、滚动位置等信息

  • SelectorQuery.exec(function callback)

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

三、获取某个元素节点信息

第一步、 创建SelectorQuery查询对象

let query = wx.createSelectorQuery()
复制代码

第二步、 获取节点对象

  • 方法一：query.select(queryString) 选择第一个匹配节点

  • 方法二：query.selectAll(queryString) 选择所有匹配节点

    • queryString 类型
      • 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
let queryString = '.blue-product>>>.product-list'
let queryNode = query.selectAll(queryString)
复制代码

第三步、调用节点对象方法

    queryNode.fields({
      id:false,//是否返回节点id
      rect:fasle,//是否返回节点布局位置
      dataset: true,//返回数据集
      size: true,//返回宽高
      scrollOffset: true,//返回 scrollLeft,scrollTop
      properties: ['scrollX', 'scrollY'],//监听属性名
      computedStyle: ['margin', 'backgroundColor']//此处返回指定要返回的样式名
    }, function(res) {
      console.log(res)
    })
    
    // 返回结果
    [{
        dataset:{},
        width:247,
        height:1065,
        scrollLeft:0,
        scrollTop:0,
        margin:"0px 0px 10px",
        backgroundColor:"rgba(0, 0, 0, 0)",
    },{
        dataset:{},
        width:247,
        height:1065,
        scrollLeft:0,
        scrollTop:0,
        margin:"0px 0px 10px",
        backgroundColor:"rgba(0, 0, 0, 0)",
    },{
        dataset:{},
        width:247,
        height:1065,
        scrollLeft:0,
        scrollTop:0,
        margin:"0px 0px 10px",
        backgroundColor:"rgba(0, 0, 0, 0)",
    }]
    
复制代码

复制代码
 query.selectAll(queryClass).boundingClientRect(function(rect){
      rect.id      // 节点的ID
      rect.dataset // 节点的dataset
      rect.left    // 节点的左边界坐标
      rect.right   // 节点的右边界坐标
      rect.top     // 节点的上边界坐标
      rect.bottom  // 节点的下边界坐标
      rect.width   // 节点的宽度
      rect.height  // 节点的高度
 })
复制代码
 wx.createSelectorQuery().selectViewport().scrollOffset(function(res){
      res.id      // 节点的ID
      res.dataset // 节点的dataset
      res.scrollLeft // 节点的水平滚动位置
      res.scrollTop  // 节点的竖直滚动位置
 })
复制代码

第四步：可一返回所有的节点信息

 query.exec(function(res) {
     console.log(res)
 })

作者：startstudysmile
链接：https://juejin.im/post/5be7df8ff265da61590b3169
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

    原文作者：矜媛宝
    原文地址: https://blog.csdn.net/shuyuan0513/article/details/85723872
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞