文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

微信小程序如何获取节点

2023-06-26 08:13

关注

小编给大家分享一下微信小程序如何获取节点,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

wx.createSelectorQuery()


基础库 1.4.0 开始支持,低版本需做兼容处理

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

示例代码:

Page({  queryMultipleNodes: function(){var query = wx.createSelectorQuery()    query.select('#the-id').boundingClientRect()    query.selectViewport().scrollOffset()    query.exec(function(res){      res[0].top       // #the-id节点的上边界坐标  res[1].scrollTop // 显示区域的竖直滚动位置})  }})

selectorQuery

selectorQuery 对象的方法列表:

方法参数说明
selectselector参考下面详细介绍
selectAllselector参考下面详细介绍
selectViewport 参考下面详细介绍
exec[callback]参考下面详细介绍

selectorQuery.select(selector)


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

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

selectorQuery.selectAll(selector)


在当前页面下选择匹配选择器selector的节点,返回一个NodesRef对象实例。 与selectorQuery.selectNode(selector)不同的是,它选择所有匹配选择器的节点。

selectorQuery.selectViewport()


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

nodesRef.boundingClientRect([callback])


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

返回的节点信息中,每个节点的位置用leftrighttopbottomwidthheight字段描述。如果提供了callback回调函数,在执行selectQuery的exec方法后,节点信息会在callback中返回。

示例代码:

Page({  getRect: function(){    wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){      rect.id      // 节点的ID  rect.dataset // 节点的dataset  rect.left    // 节点的左边界坐标  rect.right   // 节点的右边界坐标  rect.top     // 节点的上边界坐标  rect.bottom  // 节点的下边界坐标  rect.width   // 节点的宽度  rect.height  // 节点的高度}).exec()  },  getAllRects: function(){    wx.createSelectorQuery().selectAll('.a-class').boundingClientRect(function(rects){      rects.forEach(function(rect){        rect.id      // 节点的IDrect.dataset // 节点的datasetrect.left    // 节点的左边界坐标rect.right   // 节点的右边界坐标rect.top     // 节点的上边界坐标rect.bottom  // 节点的下边界坐标rect.width   // 节点的宽度rect.height  // 节点的高度  })    }).exec()  }})

nodesRef.scrollOffset([callback])


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

返回的节点信息中,每个节点的滚动位置用scrollLeftscrollHeight字段描述。如果提供了callback回调函数,在执行selectQuery的exec方法后,节点信息会在callback中返回。

示例代码:

Page({  getScrollOffset: function(){    wx.createSelectorQuery().selectViewport().scrollOffset(function(res){      res.id      // 节点的ID  res.dataset // 节点的dataset  res.scrollLeft // 节点的水平滚动位置  res.scrollTop  // 节点的竖直滚动位置}).exec()  }})

nodesRef.fields(fields, [callback])


获取节点的相关信息,需要获取的字段在fields中指定。返回值是nodesRef对应的selectorQuery。可指定获取的字段包括:

字段名默认值说明
id是否返回节点id
dataset是否返回节点dataset
rect是否返回节点布局位置(left right top bottom
size是否返回节点尺寸(width height
scrollOffset是否返回节点的 scrollLeft scrollTop ,节点必须是scroll-view或者viewport
properties[]指定属性名列表,返回节点对应属性名的当前属性值(只能获得组件文档中标注的常规属性值, id class style 和事件绑定的属性值不可获取)

示例代码:

Page({  getFields: function(){    wx.createSelectorQuery().select('#the-id').fields({      dataset: true,      size: true,      scrollOffset: true,      properties: ['scrollX', 'scrollY']    }, function(res){      res.dataset    // 节点的dataset  res.width      // 节点的宽度  res.height     // 节点的高度  res.scrollLeft // 节点的水平滚动位置  res.scrollTop  // 节点的竖直滚动位置  res.scrollX    // 节点 scroll-x 属性的当前值  res.scrollY    // 节点 scroll-x 属性的当前值}).exec()  }})

selectorQuery.exec([callback])


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

以上是“微信小程序如何获取节点”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯