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

2024-07-29 07:58:41

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()

总结：

可以实现吸附等功能

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序 WXML、WXSS 和JS介绍及详解

前几天折腾了下.然后列出一些实验结果,供大家参考. 0. 使用开发工具模拟的和真机差异还是比较大的.也建议大家还是真机调试比较靠谱. 1. WXML(HTML) 1.1 小程序的WXML没有HTML的宽容度那么高,单标签必需是 /> 结尾的.不然会报错. 1.2 官方推荐使用的基础标签<view>是块标签,给了<text>作为文本标签,但是使用其他标签比如div也是可以使用的,并且都是inline标签.并且wxml的parser会把标签上的不在白名单上的属性都去掉,cla
微信小程序教程之WXML

系列文章: 微信小程序教程之WXSS 微信小程序教程之引用微信小程序教程之事件微信小程序教程之模板微信小程序教程之列表渲染微信小程序教程之条件渲染微信小程序教程之数据绑定微信小程序教程之WXML WXML WXML(WeiXin Markup Language)是MINA设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 用以下一些简单的例子来看看WXML具有什么能力: 数据绑定  <text> {{message}
微信小程序授权获取用户详细信息openid的实例详解

小程序获取用户的头像昵称openid之类第一种使用wx.getUserInfo直接获取微信头像,昵称 wx.getUserInfo({ success: function (res) { that.setData({ nickName: res.userInfo.nickName, avatarUrl: res.userInfo.avatarUrl, }) }, }) 第二种我们在使用小程序wx.login API进行登录的时候,直接使用wx.getUserInfo是不能获取更多的信息的,如
微信小程序开发之快递查询功能的实现

微信小程序快递查询功能: 产品需求, 准备api, 代码编写. 第一步:产品需求,我们需要实现如下图的一个功能,在文本框输入快递单号,点击查询,下面出来我们需要的快递信息第二步:准备我们先找一个快递的api接口,通过http://apistore.baidu.com/我们可以看到很多的api,我们找一个快递查询的我们可以看到有接口地址,和一些参数.做好这个准备接下来就开始编码工作了---- 第三步:编码工作我们新建一个Express的文件,然后默认文件准备齐全我们现在app.js中
微信小程序实现通过js操作wxml的wxss属性示例

本文实例讲述了微信小程序实现通过js操作wxml的wxss属性.分享给大家供大家参考,具体如下: 微信小程序如何通过js操作html的css属性: 在web端.手机端.webApp中可以通过js获取dom的方式设置dom属性. 微信小程序中,不能通过这种方式进行操作. 如何在微信小程序中在wxml中操作wxss的属性. 实现思路: 通过利用数据绑定实现动态改变样式, 1.在wxxml标签内嵌css属性上绑定js的date值 2.通过js中绑定css属性的date值改变wxml标签内嵌的css属性
微信小程序 WXML节点信息查询详解

1.节点信息查询 const query = wx.createSelectorQuery();//[返回节点查询对象:SelectorQuery] //组件内,则用this.createSelectorQuery():或者query .in(this); 节点查询对象:SelectorQuery .in(this) //限定范围为自身组件,返回[节点查询对象](所以可以和下面的方法,点连调用) .exec(function callback) //执行查询 //根据str选择器查询,或者查询视
微信小程序动态传参实例详解

微信小程序动态传参实例详解在微信小程序的开发过程中经常会用到动态传参,比如根据某一页面传参的不同,加载不同的新的页面.接下来介绍下如何实现. 上一篇博客中介绍了如何用wx:for循环显示数组,一般情况下我们要实现的功能是点击不同的元素进入不同的页面,比如在另一个页面加载某个元素的详细信息. 跳转这里采用navigator跳转,在navigator跳转的链接上将参数加上去: index.wxml(根据点击页面的不同传递参数) <view class="item" wx:for=
微信小程序同步请求授权的详解

微信小程序同步请求授权的详解需求分析: 1.在小程序首次打开的时候,我需要同时请求获取多个权限,由用户逐一授权. (['scope.userInfo','scope.userLocation','scope.address','scope.record','scope.writePhotosAlbum']) 问题分析: 1. wx.authorize接口同时调用,请求多个权限,由于异步原因,将授权请求一并发出,显然不符合要求. 2. promise能很好的解决问题,试着尝试了一下,下面代码分
微信小程序访问mysql数据库流程详解

目录 1 开通云上的mysql 2 创建自定义连接器 3 创建云函数 4 安装依赖 5 出参映射 6 在小程序中使用连接器总结 1 开通云上的mysql 经过询价,我发现阿里云的数据库是比较便宜的,新人购买非常划算.对于爱学习的博主来说,果断购买一个. 按照操作指引购买后,云会帮你创建一系列的环境,在控制台就可以看到属于自己的实例点击操作列上的管理,就可以创建我们自己的数据库.配置的步骤是先创建数据库的账号然后创建一个数据库都设置好之后就可以登录数据库,创建表,加数据了刚创建好的数据库
微信小程序全局文件的使用详解

目录全局文件总结我们前边两篇介绍了账号的申请.注册,工具的安装,云服务的开通.本篇我们介绍一下基础语法.介绍的方法呢我们会结合上微搭低代码的工具一起做个对比.因为低代码工具也产生了非常多的技术概念,但最终在发布成小程序的时候也是按照微信的规范去生成的,把微信开发者工具学会了也可以更深入的了解低代码的相关概念. 全局文件小程序中是分为全局和页面级两部分.全局是在小程序的所有页面都有效,页面级是只在当前页面中生效.小程序根目录有三个文件app.js.app.json.app.wxss这三个就
微信小程序检查接口状态实例详解

微信小程序检查接口状态实例详解实例代码: // 检查接口是否可用 wx.getSetting({ success(res) { if (!res['scope.record']) { // 接口调用询问 wx.authorize({ scope: 'scope.userInfo', success(res) { wx.startRecord() // 用户已经同意小程序使用录音功能,后续调用 wx.startRecord 接口不会弹窗询问 }, fail() { }, complete()
微信小程序 POST请求的实例详解

微信小程序 POST请求的实例详解在微信小程序里post请求和get情求,写法差不多,但是还是有一点点不同的,下面利用post请求做一个查询天气的微信小程序demo. 页面代码: <view> {{title}} </view> <span style="font-size:24px;"> <view class="container"> <view style=
微信小程序-getUserInfo回调的实例详解

微信小程序-getUserInfo回调的实例详解前言: 这里就不吹嘘微信小程序有多厉害了,毕竟也不是我写的,直接谈谈我在做小程序开发时遇到的奇异Bug. getUserInfo多次调用: 对于wx.getUserInfo应该很多开发者都用过,用于获取用户基本信息,前提是需要用户授权,如果用户先前没有授权,则弹出一个提示框如下: 点击允许后,我们就能拿到用户信息,再进行后面的一系列操作.这一切看起来都是那么美好,可是在某次运行中,点允许授权后,程序并没有按照我们的预期往下执行.最后发现在其他的地
微信小程序 flex实现导航实例详解

微信小程序 flex实现导航实例详解实现示意: 1.链接顶部内边距,留出圆形图标的位置. 2.伪元素:before绘制圆形. 3.圆形中添加图标. 4.左右外边距控制间距,及促使在需要的地方换行. wxml: <view class="serviceMenu"> <navigator url="http://xwbline.com/">资本</navigator> -- </view> wxss: .serviceM
微信小程序组件之srcoll-view的详解

微信小程序组件之srcoll-view的详解今天记录一下scroll-view学习中遇到的问题及解决办法,希望能对其他同学有所帮助. 首先展示一下想达到的效果.↓ vertical scroll实现上下滚动,horizontal实现左右滚动. 先附上wxml的代码. <view class="container"> <view> <text>vertical scroll</text> <scroll-view scroll-y

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

相关推荐

随机推荐