节点信息查询 API 可以用于获取节点属性、样式、在界面上的位置等信息。
最常见的用法是使用这个接口来查询某个节点的当前位置,以及界面的滚动位置。
示例代码:
const query = wx.createSelectorQuery()
query.select("#the-id").boundingClientRect(function(res){
res.top // #the-id 节点的上边界坐标(相对于显示区域)
})
query.selectViewport().scrollOffset(function(res){
res.scrollTop // 显示区域的竖直滚动位置
})
query.exec()
上述示例中, #the-id 是一个节点选择器,与 CSS 的选择器相近但略有区别,请参见 SelectorQuery.select 的相关说明。
在自定义组件或包含自定义组件的页面中,推荐使用 this.createSelectorQuery 来代替 wx.createSelectorQuery ,这样可以确保在正确的范围内选择节点。
节点布局相交状态 API 可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。
这一组API涉及的主要概念如下。
以下示例代码可以在目标节点(用选择器 .target-class 指定)每次进入或离开页面显示区域时,触发回调函数。
示例代码:
Page({
onLoad: function(){
wx.createIntersectionObserver().relativeToViewport().observe(".target-class", (res) => {
res.id // 目标节点 id
res.dataset // 目标节点 dataset
res.intersectionRatio // 相交区域占目标节点的布局区域的比例
res.intersectionRect // 相交区域
res.intersectionRect.left // 相交区域的左边界坐标
res.intersectionRect.top // 相交区域的上边界坐标
res.intersectionRect.width // 相交区域的宽度
res.intersectionRect.height // 相交区域的高度
})
}
})
以下示例代码可以在目标节点(用选择器 .target-class 指定)与参照节点(用选择器 .relative-class 指定)在页面显示区域内相交或相离,且相交或相离程度达到目标节点布局区域的20%和50%时,触发回调函数。
示例代码:
Page({
onLoad: function(){
wx.createIntersectionObserver(this, {
thresholds: [0.2, 0.5]
}).relativeTo(".relative-class").relativeToViewport().observe(".target-class", (res) => {
res.intersectionRatio // 相交区域占目标节点的布局区域的比例
res.intersectionRect // 相交区域
res.intersectionRect.left // 相交区域的左边界坐标
res.intersectionRect.top // 相交区域的上边界坐标
res.intersectionRect.width // 相交区域的宽度
res.intersectionRect.height // 相交区域的高度
})
}
})
注意:与页面显示区域的相交区域并不准确代表用户可见的区域,因为参与计算的区域是“布局区域”,布局区域可能会在绘制时被其他节点裁剪隐藏(如遇祖先节点中 overflow 样式为 hidden 的节点)或遮盖(如遇 fixed 定位的节点)。
在自定义组件或包含自定义组件的页面中,推荐使用 this.createIntersectionObserver 来代替 wx.createIntersectionObserver ,这样可以确保在正确的范围内选择节点。
12.8.1. 配置测试12.8.2. 解析器测试12.8.3. 词典测试一个自定义文本搜索配置的行为很容易变得混乱。本节中描述的函数对于测试文...
目录14.1. 使用EXPLAIN14.1.1. EXPLAIN基础14.1.2. EXPLAIN ANALYZE14.1.3. 警告14.2. 规划器使用的统计信息14.2.1. 单列统计信...
SPI_start_transaction — start a new transaction大纲void SPI_start_transaction(void)简介 SPI_start_transaction开始一个新...
与逻辑解码互动的 SQL 层 API 详见第9.27.6节。同步复制(见第26.2.8节)只在使用流复制接口的复制槽上 支持。函数接口以及额外...
ALTER EXTENSION — 更改一个扩展的定义大纲ALTER EXTENSION name UPDATE [ TO new_version ]ALTER EXTENSION name SET SCHEMA n...
ALTER ROUTINE — 更改一个例程的定义大纲ALTER ROUTINE name [ ( [ [ argmode ] [ argname ] argtype [, ...] ] ) ]action [ .....
ALTER TABLE — 更改一个表的定义 大纲ALTER TABLE [ IF EXISTS ] [ ONLY ] name [ * ]action [, ... ]ALTER TABLE [ IF EXISTS ...
The XMLHttpRequest 对象 通过 XMLHttpRequest 对象,您可以在不重新加载整个页面的情况下更新网页中的某个部分。 XMLHttpReques...
XML DOM - ProcessingInstruction 对象XMLDOMProcessingInstruction对象是一种处理指令,它的目的是为了给处理页面的程序(例如 ...