金狮贵宾会

登录
免费开通

微信小程序API的WXML节点信息,微信小程序获取节点

wx.createSelectorQuery()


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

微信小程序API的WXML节点信息,微信小程序获取节点

返回一个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 工具的要领列表:

要领 参数 说明
select selector 参考下面详细介绍
selectAll selector 参考下面详细介绍
selectViewport   参考下面详细介绍
exec [callback] 参考下面详细介绍

selectorQuery.select(selector)


在目今页面下选择第一个匹配选择器selector的节点,,,,返回一个NodesRef工具实例,,,,可以用于获取节点信息。。。

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

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

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      // 节点的ID
        rect.dataset // 节点的dataset
        rect.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的第一个参数中返回。。。

更多微信小程序开发教程,,,,可以关注。。。
【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿,,,,由于未联系到知识产权人或未发明有关知识产权的挂号,,,,若有知识产权人并不肯意我们使用,,,,若是有侵权请连忙联系。。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真,,,,仅系客观性形貌,,,,如您需要相识该类商品/服务详细的资讯,,,,请您直接与该类商品/服务的提供者联系。。。


KESION 金狮贵宾会软件

KESION 金狮贵宾会软件是海内领先的在线教育软件及私域社交电商软件服务提供商,,,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。

KESION 一直通过手艺立异,,,,提供产品和服务,,,,助力企业向数字化转型,,,,通过科技驱动商业刷新,,,,让商业变得更智慧!



▼点击进入金狮贵宾会官网相识更多



上/下篇
  • 微信小程序一级页面和二级页面设置

  • 微信小程序使用CSS3字体

换一换相关推荐
精选内容
热门精选
金狮贵宾会·宾至如归-尊贵显赫 金狮贵宾会·宾至如归-尊贵显赫 金狮贵宾会·宾至如归-尊贵显赫
【网站地图】
微信小程序API的WXML节点信息,微信小程序获取节点 -