小程序 API 能力汇总——TYML NodesRef API

NodesRef

用于获取 TYML 节点信息的对象

方法

SelectorQuery NodesRef.fields(Object fields, NodesRef.FieldsCallback callback)

获取节点的相关信息。需要获取的字段在 fields 中指定。返回值是 nodesRef 对应的 selectorQuery

SelectorQuery NodesRef.boundingClientRect(NodesRef.boundingClientRectCallback callback)

添加节点的布局位置的查询请求。相对于显示区域,以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。

SelectorQuery NodesRef.scrollOffset(NodesRef.scrollOffsetCallback callback)

添加节点的滚动位置查询请求。以像素为单位。节点必须是 scroll-view 或者 viewport,返回 NodesRef 对应的 SelectorQuery。

NodesRef.boundingClientRect(function callback)

添加节点的布局位置的查询请求。相对于显示区域,以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。

参数
function callback

回调函数,在执行 SelectorQuery.exec 方法后,节点信息会在 callback 中返回。

参数

Object res

属性类型说明
idstring节点的 ID
datasetObject节点的 dataset
leftnumber节点的左边界坐标
rightnumber节点的右边界坐标
topnumber节点的上边界坐标
bottomnumber节点的下边界坐标
widthnumber节点的宽度
heightnumber节点的高度

返回值

SelectorQuery

示例代码

Page({getRect() {ty.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() {ty.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.fields(Object fields, function callback)

获取节点的相关信息。需要获取的字段在 fields 中指定。返回值是 nodesRef 对应的 selectorQuery

参数
Object fields
属性类型默认值必填说明
idbooleanfalse是否返回节点 id
datasetbooleanfalse是否返回节点 dataset
rectbooleanfalse是否返回节点布局位置(left right top bottom
sizebooleanfalse是否返回节点尺寸(width height
scrollOffsetbooleanfalse是否返回节点的 scrollLeft scrollTop,节点必须是 scroll-view 或者 viewport
propertiesArray<string>[]指定属性名列表,返回节点对应属性名的当前属性值(只能获得组件文档中标注的常规属性值,id class style 和事件绑定的属性值不可获取)
nodebooleanfalse是否返回节点对应的 Node 实例
function callback

回调函数

参数
Object res

节点的相关信息

返回值

SelectorQuery

示例代码

Page({getFields() {ty.createSelectorQuery().select('#the-id').fields({dataset: true,size: true,scrollOffset: true,properties: ['scrollX', 'scrollY'],},function (res) {res.dataset; // 节点的datasetres.width; // 节点的宽度res.height; // 节点的高度res.scrollLeft; // 节点的水平滚动位置res.scrollTop; // 节点的竖直滚动位置res.scrollX; // 节点 scroll-x 属性的当前值res.scrollY; // 节点 scroll-y 属性的当前值},).exec();},
});

NodesRef.scrollOffset(function callback)

添加节点的滚动位置查询请求。以像素为单位。节点必须是 scroll-view 或者 viewport,返回 NodesRef 对应的 SelectorQuery。

参数
function callback

回调函数,在执行 SelectorQuery.exec 方法后,节点信息会在 callback 中返回。

参数
Object res
属性类型说明
idstring节点的 ID
datasetObject节点的 dataset
scrollLeftnumber节点的水平滚动位置
scrollTopnumber节点的竖直滚动位置

返回值

SelectorQuery

示例代码

Page({getScrollOffset() {ty.createSelectorQuery().selectViewport().scrollOffset(function (res) {res.id; // 节点的IDres.dataset; // 节点的datasetres.scrollLeft; // 节点的水平滚动位置res.scrollTop; // 节点的竖直滚动位置}).exec();},
});

👉 立即开发。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/708761.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

嘴尚绝卤味传统与创新的完美结合

在当下这个美食文化丰富多彩的时代&#xff0c;卤味作为一种深受大众喜爱的食品&#xff0c;不仅承载着传统的烹饪智慧&#xff0c;更在不断创新中展现出新的魅力。嘴尚绝卤味&#xff0c;作为卤味市场中的佼佼者&#xff0c;凭借其独特的优势&#xff0c;正逐渐成为消费者心中…

java高级——动态代理

目录 动态代理介绍明星代理案例实现案例分析动态代理应用场景 动态代理介绍 用一个明星的案例来解释动态代理的流程。 假设现在有一个明星坤坤&#xff0c;它有唱歌和跳舞的本领&#xff0c;作为明星是要用唱歌和跳舞来赚钱的。但是每次做节目&#xff0c;唱歌的时候要准备话…

阿里云2024年服务器2核4G配置评测_CPU内存带宽_优惠价格

阿里云2核4G服务器多少钱一年&#xff1f;2核4G服务器1个月费用多少&#xff1f;2核4G服务器30元3个月、85元一年&#xff0c;轻量应用服务器2核4G4M带宽165元一年&#xff0c;企业用户2核4G5M带宽199元一年。本文阿里云服务器网整理的2核4G参加活动的主机是ECS经济型e实例和u1…

卢森堡比利时土耳其媒体宣发稿助力跨境出海推广新闻营销

【本篇由言同数字科技有限公司原创】随着全球化进程的加速&#xff0c;越来越多的品牌开始考虑在海外市场扩展业务。对于品牌来说&#xff0c;跨境海外推广是必要的&#xff0c;因为它可以帮助品牌打开更大的市场、吸引更多的消费者、提高品牌知名度和形象&#xff0c;并在全球…

Linux磁盘性能方法以及磁盘io性能分析

Linux磁盘性能方法以及磁盘io性能分析 1. fio压测1.1. 安装fio1.2. bs 4k iodepth 1&#xff1a;随机读/写测试&#xff0c;能反映硬盘的时延性能1.3. bs 128k iodepth 32&#xff1a;顺序读/写测试&#xff0c;能反映硬盘的吞吐性能 2. dd压测2.1. 测试纯写入性能2.2. 测试…

MurmurHash算法

MurmurHash&#xff1a;(multiply and rotate) and (multiply and rotate) Hash&#xff0c;乘法和旋转的hash 算法。 一、哈希函数 散列函数&#xff08;英语&#xff1a;Hash function&#xff09;又称散列算法、哈希函数&#xff0c;是一种从任何一种数据中创建小的数字“…

抖音小店新店没有体验分怎么办?怎么从零做体验分?新手商家速看

大家好&#xff0c;我是电商花花。 新手开店的体验分都不是很高&#xff0c;我们想要做店铺体验分都要从零开始做。 如果新手开店不需要怎么出体验分&#xff0c;不知道怎么提高店铺体验分的&#xff0c;都可以看一下今天的文章&#xff0c;教大家怎么做店铺的体验分。 首先&…

基于springboot + vue实现的前后端分离-汽车票网上预定系统(项目 + 论文)

项目介绍 系统是一个B/S模式系统&#xff0c;采用Spring Boot框架&#xff0c;MySQL 数据库设计开发&#xff0c;充分保证系统的稳定性。系统具有界面清晰、操作简单&#xff0c;功能齐全的特点&#xff0c;使得汽车票网上预订系统管理工作系统化、规范化。本系统的使用使管理人…

JVM——JVM与Java体系结构

文章目录 1、Java及JVM简介1.1、Java是跨平台的语言1.2、JVM是跨语言的平台 2、Java发展里程碑3、Open JDK和Oracle JDK4、虚拟机与JVM4.1、虚拟机4.2、JVM 5、JVM整体结构6、Java代码执行流程7、JVM的架构模型7.1、基于栈式架构的特点7.2、基于寄存器架构的特点 8、JVM的生命周…

React.FC详细说明以及案例

React.FC是React中用于定义函数式组件的一种类型。它是React.FunctionComponent的缩写&#xff0c;表示一个接收props作为输入并返回JSX元素的函数组件。React.FC提供了一种在TypeScript中使用的方式&#xff0c;允许我们为组件提供props的类型定义&#xff0c;并且可以利用Typ…

Unity3D 兰伯特漫反射光照模型详解

前言 Unity3D 提供了丰富的功能和工具&#xff0c;让开发者可以轻松创建出高质量的游戏。其中&#xff0c;光照模型是游戏中非常重要的一部分&#xff0c;它可以让游戏场景看起来更加真实和生动。在 Unity3D 中&#xff0c;我们可以使用不同的光照模型来实现不同的效果&#x…

网络基本类型

机器之间的通信是一个复杂的过程&#xff0c;它体现了大问题的复杂性。本章主要从“模型和结构”的计算思维概念&#xff0c;介绍网络通信的方法&#xff1b;并且用“安全”的概念&#xff0c;介绍网络攻击的防护方法&#xff0c;以及信息的加密和解密。 ▶1.互联网的发展 19…

嵌入式驱动学习第一周——定时器与延时函数

前言 这篇博客一起学习定时器&#xff0c;定时器是最常用到的功能之一&#xff0c;其最大的作用之一就是提供了延时函数。 嵌入式驱动学习专栏将详细记录博主学习驱动的详细过程&#xff0c;未来预计四个月将高强度更新本专栏&#xff0c;喜欢的可以关注本博主并订阅本专栏&…

刷题第3天(基础理论):链表基础理论

1.链表定义&#xff1a;链表是一种通过指针串联在一起的线性结构。每个节点由两部分组成&#xff0c;一个是数据域&#xff0c;一个是指针域&#xff08;存放指向下一个节点的指针&#xff09;&#xff0c;最后一个节点的指针域指向null&#xff08;空指针的意思&#xff09; …

cRIO9040中NI9871模块的测试

硬件准备 CompactRIO9040NI9871直流电源&#xff08;可调&#xff09;网线RJ50转DB9线鸣志STF03-R驱动器和步进电机 软件安装 参考&#xff1a;cRIO9040中NI9381模块的测试 此外&#xff0c;需安装NI-Serial 9870和9871扫描引擎支持 打开NI Measurement&#xff06;Automa…

Docke相关命令总结

docker systemctl 相关 commanddetailsudo systemctl start docker启动dockersudo systemctl stop docker停止dockersudo systemctl restart docker重启dockersudo systemctl status docker查看docker状态 镜像相关 commanddetaildocker search 镜像名称搜索镜像docker pull …

多线程爬虫基础代码

#导入线程模块 import threading def coding(): #定义 coding 函数&#xff0c;用于打印字符串 "aaa" 十次for i in range(10):print("aaa")def ac(): #定义 ac 函数&#xff0c;用于打印字符串 "bbbb" 十次&a…

jetson nano——编译安装opencv-python==4.3.0.38

目录 1.下载源码&#xff0c;我提供的链接如下&#xff1a;2.解压文件3.安装依赖scikit4.安装opencv-python5.查看opencv-python版本 系统&#xff1a;jetson-nano-jp451-sd-card-image ubuntu 18.04 1.下载源码&#xff0c;我提供的链接如下&#xff1a; 链接&#xff1a;http…

网络:IPv6

1、由于IPv4地址资源枯竭&#xff0c;所以产生了IPV6。 版本长度地址数量IPv432 bit4 294 967 296IPv6128 bit340 282 366 920 938 463 374 607 431 768 211 456 2、IPv6的基本报头在IPv4报头基础上&#xff0c;增加了流标签域&#xff0c;去除了一些冗余字段&#xff0c;使报…

RabbitMQ常用命令笔记

Ubuntu 安装 sudo apt install rabbitmq-server查看状态 sudo rabbitmqctl status启动可视化插件 sudo rabbitmq-plugins enable rabbitmq_management查看可视化端口 sudo rabbitmqctl status添加用户名密码 sudo rabbitmqctl add_user 用户名 密码设置管理员权限 sudo r…