Uniapp 微信小程序，实现页面滚动Tab悬停吸顶，点击tab内容跟随滚动

Uniapp 微信小程序，实现页面滚动Tab悬停吸顶，点击tab内容跟随滚动

页面股东tab悬停原理：

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

1.页面template结构

  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
    },
  }

微信搜索【蜜蜂网盘搜so】小程序，万部短剧搜索