<div :class="{tabFixed:tabFixed}" class="tab-wrap clearfloat">
              <p @click="contentRouter(0, 'param')" :class="{ tabActive: showTable===0 }">規(guī)格參數</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">
      <!--規(guī)格參數-->
      <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監(jiān)聽滾動事件
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' })
        }
      })
    },
    // 頁面滾動參數規(guī)則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這里的時候才執(zhí)行下面的
        // 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}