微信小程序 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 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
JQuery中ajax方法访问web服务实例
Jul 18 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
如何编写一个 Webpack Loader的实现
Oct 18 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 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
关于js与php互相传值的介绍
2013/06/25 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
php简单判断文本编码的方法
2015/07/30 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
网站上面有这种切换效果
2006/06/26 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
浅析Python3 pip换源问题
2020/01/06 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
护理自我鉴定范文
2013/10/06 职场文书
大专毕业生自我鉴定
2013/11/21 职场文书
厂长助理岗位职责
2013/12/27 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
旅游节目策划方案
2014/05/26 职场文书
青岛海底世界导游词
2015/02/11 职场文书
Python使用openpyxl模块处理Excel文件
2022/06/05 Python