Uniapp实现页面滚动Tab吸顶，点击tab内容滚动到对应tab内容位置

思路：运用uniapp原生提供方法uni.createSelectorQuery()获取滚动对应节点的信息，即节点距离页面顶部的距离，再通过uniapp原生监听页面滚动事件onPageScroll，获取页面内容滚动的高度，二者相加即定位到对应节点的滚动距离。

1.template结构

    
      
        
          {{item.name}}
        
      
    
     
    
      
        

2.定义变量

  data() {
    return {
      curTab: 0,
      isTabFixed: false,
      tabTop: 0,  // tab距离顶部的距离
      curClassName: '',
      pageScrollTop: 0
    }
  },
  computed() {
    detailTabs() {
      let tabs = [{
        name: '正文详情',
        className: '.library-detail-content'
      }]
      if(this.attachment && this.attachment.length > 0) {
        tabs.splice(1, 0, {
          name: '相关附件',
          className: '.library-detail-attachment'
        })
      }
      if(this.relatedPosts && this.relatedPosts.length > 0) {
        tabs.splice(2, 0, {
          name: '图文解读',
          className: '.library-detail-relatedPosts'
        })
      }
      return tabs
    },
  }

3.方法定义

// 点击tab滚动事件
  scrollTo(tab, className) {
      if(!className) return
      if(this.curClassName == className) return
      this.curTab = tab
      const query = uni.createSelectorQuery().in(this);
      query.select(className).boundingClientRect(data => {
        uni.pageScrollTo({
          scrollTop: className == '.library-detail-content' ? 0 : (data?.top + ((this.pageScrollTop || 0))),
          duration: 300
        })
      }).exec();

      this.curClassName = className
    },

// uni页面滚动监听事件
  onPageScroll(e) {
    // 获取tabs的距离顶部的距离
    this.tabTop = uni.createSelectorQuery().select('.content-tabs').boundingClientRect(data => {
      this.tabTop = data.top;
      this.isTabFixed = (e.scrollTop > this.tabTop)
      this.pageScrollTop = e.scrollTop
    }).exec();
  },

4.实现效果