vue/nuxt.js滚动页面tab自动定位/tab点击定位

<div :class="{tabFixed:tabFixed}" class="tab-wrap clearfloat">
              <p @click="contentRouter(0, 'param')" :class="{ tabActive: showTable===0 }">规格参数</p>
              <p @click="contentRouter(1, 'pdf')" :class="{ tabActive: showTable===1 }" v-if="autoProductPDF">数据手册 PDF</p>
              <p @click="contentRouter(2, 'detailList')" :class="{ tabActive: showTable===2 }" v-if="details">商品详情</p>
            </div>
<div class="detail-list-wrap">
      <!--规格参数-->
      <div class="detail-list" id="param">
        
      </div>
      <!--数据手册-->
      <div v-if="autoProductPDF" id="pdf" class="detail-list">
        
      </div>
      <!--商品详情-->
      <div v-if="details" id="detailList" class="detail-list">
       
      </div>
    </div>

data:
showTable: 0,
tabFixed: false,
autoProductPDF: false, // 根据后台返回数据判断是否显示
details:false, // 根据后台返回数据判断是否显示
// 在mounted监听滚动事件
mounted() {
    window.addEventListener('scroll', this.watchScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.watchScroll)
  },
methods:
contentRouter(index, el) {
      this.showTable = index
      this.$nextTick(() => {
        const normalT = document.querySelector(`#${el}`)
        if (this.tabFixed) {
          normalT && window.scrollTo({ top: normalT.offsetTop + 1, behavior: 'smooth' })
        } else {
          // 39为tab高度减1
          normalT && window.scrollTo({ top: normalT.offsetTop - 39, behavior: 'smooth' })
        }
      })
    },
    // 页面滚动参数规则tab自动定位
    watchScroll() {
      this.$nextTick(() => {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        const header = document.querySelector('.header-wrap').offsetHeight
        const productWrap = document.querySelector('.product-wrap').offsetHeight
        // header和productWrap是tab上面部分的内容的offsetHeight，当滚动到tab这里的时候才执行下面的
        // 50是tab上面各部分的margin的总和
        if (scrollTop > (header + productWrap + 50)) {
          const sections = document.querySelectorAll('.detail-list')
          sections.forEach((value, index) => {
            if (value.offsetTop < scrollTop) {
              if (value.id === 'param') {
                this.showTable = 0
              }
              if (value.id === 'pdf') {
                this.showTable = 1
              }
              if (value.id === 'detailList') {
                this.showTable = 2
              }
            }
          })
          this.tabFixed = true
        } else {
          this.tabFixed = false
        }
      })
    }

.tab-wrap {
        width: 100%;
        border-bottom: 1px solid #ececec;
        padding: 10px 10px 10px 40px;

        p {
          float: left;
          color: #333333;
          margin-right: 90px;
          cursor: pointer;
          &:hover {
            color: #e5242b;
          }
        }

        .tabActive {
          color: #e5242b;
        }
      }
// 清除浮动
.clearfloat::after{display:block;clear:both;content:"";visibility:hidden;height:0}