微信小程序 WXML节点信息查询详解


Posted in Javascript onJuly 29, 2019

1、节点信息查询

const query = wx.createSelectorQuery();//【返回节点查询对象:SelectorQuery】
//组件内,则用this.createSelectorQuery();或者query .in(this);
节点查询对象:SelectorQuery
.in(this) //限定范围为自身组件,返回【节点查询对象】(所以可以和下面的方法,点连调用)
.exec(function callback) //执行查询

//根据str选择器查询,或者查询视窗。【返回节点对象:NodesRef】
.select(selector) //根据选择器str查询,返回一个匹配
.selectAll(selector) //根据选择器str查询,返回所有匹配
.selectViewport()//选择显示区域
节点对象:NodesRef
//执行底下请求后,返回SelectorQuery对象。
.fields({//这个是常规查询,你想要查询的信息,配置好,就可以查询。底下还有细分的某一类查询。
 id:true,//这两个以下细分节点查询都会有这个返回
 dataset:true,

 rect:true,//这两个包括id,dataset。相当于boundingClientRect查询
 size:true,

 scrollOffset:true,//这个包括,id,dataset。相当于scrollOffset查询

 context:true,//这个包括id,dataset。相当于context查询
 
 properties:[],//可以获取除id,class,style,事件绑定之外的属性
 computedStyle:[],//可以获取样式
})

.boundingClientRect(function callback)//相对于显示区域,以像素为单位
//返回节点,相当于视图的(左上为原点)四个边的边界像素。及宽高。及dataset
//相当于:id:true, dataset:true,rect:true,size:true,


.scrollOffset(function callback)//添加节点的滚动位置查询请求。以像素为单位。节点必须是 scroll-view 或者 viewport
//相当于 id:true,dataset:true,

.context(function callback)//添加节点的 Context 对象查询请求。
目前支持 VideoContext、CanvasContext、LivePlayerContext 和 MapContext 的获取

总结:

第一步,返回节点查询对象:

const query = wx.createSelectorQuery();

第二步,查询对象执行查询,返回节点对象:

query .in(this);//返回节点查询对象【如果要限定组件范围则需要】

select(selector)/selectAll(selector)/selectViewport()     .

第三步,节点对象配置需要的节点信息,返回查询对象:

fields()/boundingClientRect()/scrollOffset()/context()

第四步,查询对象执行查询:

exec(function callback)

说明:function callback,可以放在exec。也可以放在boundingClientRect()/scrollOffset()/context()

但如果像fields().。只能放在exec

2、节点相交状态查询

wx.createIntersectionObserver();//组件用:wx.createIntersectionObserver(this);
//返回节点观察到对象
选择参照区域
.relativeTo(selector,[margins])//选择某个节点区域作为参照物
或
relativeToViewport([margins])//选择视图置为参照物

其中:margins:用来扩展(或收缩)参照节点布局区域的边界

其中:margins:用来扩展(或收缩)参照节点布局区域的边界

选择观察者,并且开始监听
.observe(string targetSelector, function callback)
停止监听:
.disconnect()

总结:

可以实现吸附等功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 命名规则 变量命名规则
Feb 25 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
js窗口震动小程序分享
Nov 28 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 #Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 #Javascript
vue.js 2.0实现简单分页效果
Jul 29 #Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 #Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 #Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 #Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 #Javascript
You might like
PHP 采集心得技巧
2009/05/15 PHP
深入php socket的讲解与实例分析
2013/06/13 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
react基本安装与测试示例
2020/04/27 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
[41:08]TNC vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
pycharm新建一个python工程步骤
2019/07/16 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
师范毕业生自我鉴定
2014/01/15 职场文书
新闻传播专业求职信
2014/07/22 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
幼儿园教师求职信
2015/03/20 职场文书
小学教师党员承诺书
2015/04/27 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
导游词之河北邯郸
2019/09/12 职场文书