最近在做一个ipad端的下拉框组件,功能实现并不复杂,难的是如何判断当下拉框超出可视范围时的状态,
当时查了好多资料得出的结论是:
let view = uni.createSelectorQuery().in(this).select(‘class‘) view.fields({ size: true,//是否返回节点尺寸(width
height
) rect: true,//是否返回节点的scrollLeft
scrollTop
,节点必须是scroll-view
或者viewport
scrollOffset: true,//是否返回节点的scrollLeft
scrollTop
,节点必须是scroll-view
或者viewport
}, (res) => { if (res.bottom > 500) { let up = this.list.length > 6 ? 6 : this.list.length up *= 80 up += 10 this.topShowStyle = ‘top:-‘+up+‘upx;‘ } }).exec();
可能很多同学都认识:uni.createSelectorQuery().select(‘class‘),但是:uni.createSelectorQuery().in(this).select(‘class‘)这个会被忽略掉,
两者之间的区别:
uni.createSelectorQuery().select(‘class‘):(组件情况下,非组件下没试过)返回当前节点相对于该节点父元素的位置信息,就是说返回的数据left丶right丶bottom丶top都是相对于父元素的距离,并不是我们想要的相对于页面的位置
所以正确的方法得加上.in(this)
uni.createSelectorQuery().in(this)官方文档给出的解释是:将选择器的选取范围更改为自定义组件 component
内,返回一个 SelectorQuery
对象实例。(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点)。
因为我做的是组件,所以用uni.createSelectorQuery().select(‘class‘)得到的节点是相对于父元素节点的位置,要获取组件相对于页面的位置应该用uni.createSelectorQuery().in(this).select(‘class‘)
想查看更多节点信息的同学可以去官网查看文档:https://uniapp.dcloud.io/api/ui/nodes-info?id=createselectorquery