小程序文档整理之 -- API(WXML节点信息)
WXML节点信息
wx.createSelectorQuery()
返回一个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.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。
返回的节点信息中,每个节点的位置用left、right、top、bottom、width、height字段描述。如果提供了callback回调函数,在执行selectQuery的exec方法后,节点信息会在callback中返回。
Page({getRect: function(){wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){rect.id // 节点的IDrect.dataset // 节点的datasetrect.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。
返回的节点信息中,每个节点的滚动位置用scrollLeft、scrollHeight字段描述。如果提供了callback回调函数,在执行selectQuery的exec方法后,节点信息会在callback中返回。
Page({getScrollOffset: function(){wx.createSelectorQuery().selectViewport().scrollOffset(function(res){res.id // 节点的IDres.dataset // 节点的datasetres.scrollLeft // 节点的水平滚动位置res.scrollTop // 节点的竖直滚动位置}).exec()}
})
nodesRef.fields(fields, [callback])
获取节点的相关信息,需要获取的字段在fields中指定。返回值是nodesRef对应的selectorQuery。可指定获取的字段包括:
Page({getFields: function(){wx.createSelectorQuery().select('#the-id').fields({id//是否返回节点iddataset: true,//是否返回节点datasetrect//是否返回节点布局位置(left right top bottom)size: true,//是否返回节点尺寸(width height)scrollOffset: true,//是否返回节点的 scrollLeft scrollTop ,节点必须是scroll-view或者viewportproperties: ['scrollX', 'scrollY']//指定属性名列表,返回节点对应属性名的当前属性值(只能获得组件文档中标注的常规属性值, id class style 和事件绑定的属性值不可获取)}, function(res){res.dataset // 节点的datasetres.width // 节点的宽度res.height // 节点的高度res.scrollLeft // 节点的水平滚动位置res.scrollTop // 节点的竖直滚动位置res.scrollX // 节点 scroll-x 属性的当前值res.scrollY // 节点 scroll-x 属性的当前值}).exec()}
})
selectorQuery.exec([callback])
执行所有的请求,请求结果按请求次序构成数组,在callback的第一个参数中返回。
小程序文档整理之 -- API(WXML节点信息)相关推荐
- 小程序文档整理之 -- API(数据分析)
开发者通过数据分析接口,可获取到小程序的各项数据指标,便于进行数据存储和整理.数据分析详细功能介绍及指标解释参见数据分析文档. 常规分析 概况 用户访问小程序的详细数据可从访问分析中获取,概况中提供累 ...
- 小程序文档整理之 -- API(媒体)
媒体 图片 wx.chooseImage(object) 从本地相册选择图片或使用相机拍照 wx.chooseImage({count: 1, // 最多可以选择的图片张数,默认9sizeType: ...
- 小程序文档整理之 -- API(文件)
文件 wx.saveFile(object) 保存文件到本地 wx.chooseImage({success: function(res) {var tempFilePaths = res.tempF ...
- 微信小程序使用百度api获取天气信息 —— 微信小程序教程系列(16)
之前已经介绍过,如何使用百度地图api来获取地理位置信息 微信小程序的百度地图获取地理位置 -- 微信小程序教程系列(15) 下面介绍使用百度api来获取天气信息. 1> 第一步:先到百度开放平 ...
- 电商收付通整合小程序文档整理
一.开发环境 开发前准备材料 服务商平台中开通[收付通]工具箱. 商户私钥:商户申请商户API证书时,会生成商户私钥,并保存在本地证书文件夹的文件apiclient_key.pem中. 商户API证书 ...
- 微信小程序使用高德API获取位置信息
//调用方法app.getAmapLocation().then((res) => {console.log(res);}); var amapFile = require('static/js ...
- 小程序文档整理之 -- 场景值
微信小程序支持的场景值有: 场景值ID 说明 1001 发现栏小程序主入口 1005 顶部搜索框的搜索结果页 1006 发现栏小程序主入口搜索框的搜索结果页 1007 单人聊天会话中的小程序消息卡片 ...
- 小程序api 分享scene_微信小程序 插件调用API的限制
插件调用 API 的限制 插件可以调用的 API 与小程序不同,主要有两个区别: 插件的请求域名列表与小程序相互独立: 一些 API 不允许插件调用(这些函数不存在于 wx 对象下). 有些接口虽然在 ...
- uni-app获取节点信息
uni.createSelectorQuery() | uni-app官网 使用这个API获取节点信息 什么场景用到呢?我是在这样的情况下用到的. 我要展示的一块内容,被swiper包裹(当然这是我需 ...
最新文章
- spoj String To Binary(数字转二进制、读取数字和字符串)
- 《高效程序员的修炼》 读书笔记
- 几个颇有创意的网站推广方法(推荐)
- WPF自定义控件的三种方式
- 如何批量查询PR值、百度权重、百度快照及收录量,用BlueCatTools批量网站查询工具
- HTML照片墙 个性相册源码
- 第七届蓝桥杯大赛个人赛省赛(软件类)真题4
- [JNI] 开发之旅 (1)开发流程介绍
- 医疗行业缩写所表示含义
- Matlab画图程序
- 使用python控制其他软件运行并操作处理数据_Python 运行其他程序
- linux python for循环语句,Python之for循环的使用
- 关于ResourceBundle国际化的一些思考
- 【小知识】Elastic Search排除某个索引后缀
- 《守望先锋》架构设计和网络同步
- 斯特林公式 ——Stirling公式(取N阶乘近似值)
- 你别不信,安卓机用户才是苹果机涨价的最大受害者
- 教你快速识别网络项目的骗术
- 羊皮卷之七:我要笑遍世界
- JZOJ5426. 【NOIP2017提高A组集训10.25】摘Galo
热门文章
- 由浅入深玩转华为WLAN—23 Traffic-filter(ACL)在WLAN无线场景的应用
- 基于R语言的回归分析实现
- 中文Stable Diffusion模型太乙使用教程
- SUN WPK解包算法
- codeforces1430E String Reversal
- 2021-12-20 WPF上位机 120-三菱PLC协议之读写方法流程解析
- 市政管网检测机器人收费标准_滦州市机器人检测随叫随到收费标准
- jira把hsql转成mysql_jira从HSQL迁移到MYSQL
- 《Netty实战-写一个RPC应用》
- Visual C++网络编程经典案例详解 第9章 实用播放器 数据读取与播放控制 识别数据文件信息