uniapp获取节点位于页面的位置

最近在做一个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

uniapp获取节点位于页面的位置

原文：https://www.cnblogs.com/MyReM/p/14240252.html