小程序 获取 某个元素 与顶部的绝对位置。

小程序 获取位置  坐标

  // 获取元素绝对位置（相对于页面顶部）
  getAbsolutePosition(selector) {
    return new Promise((resolve) => {
      // 获取元素位置
      wx.createSelectorQuery()
        .select(selector)
        .boundingClientRect(rect => {
          // 获取页面滚动位置
          wx.createSelectorQuery()
            .selectViewport()
            .scrollOffset(scroll => {
              const absoluteTop = rect.top + scroll.scrollTop
              resolve({
                top: absoluteTop,
                left: rect.left + scroll.scrollLeft
              })
            }).exec()
        }).exec()
    })
  },
  
  
  调用方案
  
    onReady() {
    var this_ = this;
    setTimeout(function() {
      this_.getAbsolutePosition('#type_list').then(pos => {
        console.log('绝对位置:', pos.top, pos.left)
        this_.setData({
          type_list_top: pos.top
        })
      })
   }, 100);
  },
  
  获取这个位置。屏幕滚动也不会受影响。
  
  
  
  超过这个位置 显示 我们的浮动菜单 。
  
    onPageScroll(options) {
    let scrollTop = options.scrollTop;
    console.log(scrollTop);
    if (scrollTop >= this.data.type_list_top) {
      //可以显示 浮动导航了。
      console.log("可以显示 浮动导航了")
      this.setData({
        type_list_fiexd: true
      })
    } else {
      this.setData({
        type_list_fiexd: false
      })
    }
  }

之前用的方案是这样。

  load_ok() {
    // id="tab-control" 
    var this_ = this;
    wx.createSelectorQuery().select('#type_list').boundingClientRect((rect) => {
      //console.log("rect.top::" + rect.top);//这个值是一直变化的。 如果向下滑动到顶部， 会变成0 
      if (rect.top <= 0) {
        //可以显示 浮动导航了。
        console.log("可以显示 浮动导航了")
        this_.setData({
          type_list_fiexd: true
        })
      } else {
        this_.setData({
          type_list_fiexd: false
        })
      }
    }).exec();
  },
  
  调用 方法 。
  在onReady  里面写个定时器。一直调用这个load_ok。不太好。所以改了。