https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#nodesrefboundingclientrect
uni.createSelectorQuery()
返回一个 SelectorQuery
对象实例。可以在这个实例上使用 select
等方法选择节点,并使用 boundingClientRect
等方法选择需要查询的信息。
Tips:
- 使用
uni.createSelectorQuery()
需要在生命周期mounted
后进行调用。 - 默认需要使用到
selectorQuery.in
方法。
# SelectorQuery
查询节点信息的对象
# selectorQuery.in(component)
将选择器的选取范围更改为自定义组件 component
内,返回一个 SelectorQuery
对象实例。(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点)。
const query = uni.createSelectorQuery().in(this); query.select('#id').boundingClientRect(data => { console.log("得到布局位置信息" + JSON.stringify(data)); console.log("节点离页面顶部的距离为" + data.top); }).exec();
注意
- 支付宝小程序不支持in(component),使用无效果
# selectorQuery.select(selector)
在当前页面下选择第一个匹配选择器 selector
的节点,返回一个 NodesRef
对象实例,可以用于获取节点信息。
selector 说明:
selector
类似于 CSS 的选择器,但仅支持下列语法。
- ID选择器:
#the-id
- class选择器(可以连续指定多个):
.a-class.another-class
- 子元素选择器:
.the-parent > .the-child
- 后代选择器:
.the-ancestor .the-descendant
- 跨自定义组件的后代选择器:
.the-ancestor >>> .the-descendant
- 多选择器的并集:
#a-node, .some-other-nodes
# selectorQuery.selectAll(selector)
在当前页面下选择匹配选择器 selector
的所有节点,返回一个 NodesRef
对象实例,可以用于获取节点信息。
# selectorQuery.selectViewport()
选择显示区域,可用于获取显示区域的尺寸、滚动位置等信息,返回一个 NodesRef
对象实例。
# selectorQuery.exec(callback)
执行所有的请求。请求结果按请求次序构成数组,在callback的第一个参数中返回。
export default { data() { return { temp :';padding-top: 150px;padding-left: 0px;padding-bottom: 17px;padding-right: 0px;background-color: #F5F6F8;background-attachment: scroll;', screenHeight: 0, //屏幕高度 statusBarHeight: 0, //状态栏高度高度 info: [],//展示的列表数据 isLoading: false, //防止频繁触发 bottomDistinct:200//距离底部多少像素时触发 } }, onLoad() { //页面初始化执行,用户页面获取参数 }, onPageScroll : function(e) { //nvue暂不支持滚动监听,可用bindingx代替 //console.log("滚动距离为:" + e.scrollTop + ",屏幕高度为:" + this.screenHeight); //如果设置的事件触发距离 大于等于 (节点的高度-屏幕高度-滚动条到顶部的距离) if(e.scrollTop > 30) { console.log("滚动大于30 -----------------------------"); this.temp =';padding-top: 150px;padding-left: 0px;padding-bottom: 17px;padding-right: 0px;background-color: #F5F6F8;background-attachment: scroll;'; }else{ //this.temp =';padding-top: 110px;'; } }, methods: { getInfo() { let info = uni.createSelectorQuery().in(this).select("#hyb"); info.boundingClientRect(function(data) { //data - 各种参数 console.log("得到布局位置信息" + JSON.stringify(data)); console.log("data.height>" +data.height); // 获取元素宽度 console.log("节点离页面顶部的距离为" + data.top); //_this.domHeight = data.height; }).exec(); } }, onReady() { //页面初次渲染完毕执行 this.getInfo() }, mounted() { //页面加载时取得屏幕高度 uni.getSystemInfoSync({ success:(e)=> { this.screenHeight = e.screenHeight; this.statusBarHeight = e.statusBarHeight; // let info = uni.createSelectorQuery().select(".hyb-search-bar"); // info.boundingClientRect(function(data) { //data - 各种参数 // console.log(data) // 获取元素宽度 // //_this.domHeight = data.height; // }).exec() } }) } }