通常在做微信小程序的时候我们经常会需要获取元素的信息,但是微信小程序有没有完整的“DOM”操作,无法像浏览器中获取元素。

不过在微信中也有一套自己的“DOM”,那就是NodesRef,它可以让我们像开发浏览器程序一样轻松愉快的获取页面元素

一、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) })
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐