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

posted @ 2021-01-06 11:55  蕾姆大人  阅读(4792)  评论(0编辑  收藏  举报