官方文档
SelectorQuery文章来源地址https://www.toymoban.com/news/detail-612517.html
应用
1、创建选择器
const query = wx.createSelectorQuery();
将选择器的选取范围更改为自定义组件component内.(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点)
const query = wx.createSelectorQuery().in(this);
2、查询
获取单个
query.select('选择器').boundingClientRect((res)=>{...})
获取集合
query.selectAll('选择器').boundingClientRect((res)=>{
rect.id // 节点的ID
rect.dataset // 节点的dataset
rect.left // 节点的左边界坐标
rect.right // 节点的右边界坐标
rect.top // 节点的上边界坐标
rect.bottom // 节点的下边界坐标
rect.width // 节点的宽度
rect.height // 节点的高度
}).exec()
3、获取dom
目前支持Canvas的获取。
query.select('选择器').node((res)=>{...})
4、在滚动视图中获取相关滚动数据
节点必须是 scroll-view 或者 viewport,返回 NodesRef 对应的 SelectorQuery。
query.select('选择器').selectViewport().scrollOffset(function(res) {
res.id // 节点的ID
res.dataset // 节点的dataset
res.scrollLeft // 节点的水平滚动位置
res.scrollTop // 节点的竖直滚动位置
}).exec()
文章来源:https://www.toymoban.com/news/detail-612517.html
到了这里,关于小程序获取dom信息的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!