css图片滑动切换图_最近很流行的一种tab切换样式

1、需求如下：

图片一：进入页面下滑开始出现tab页

图片二：当页面滑动到一定位置时tab页会固定

图片三：在tab没有滑动到一定位置时，点击切换，也要固定在头部

图片四：tab每次进行切换时对应的内容要“从头”开始展示

2、代码如下：

js部分

   <div class="order-head">
      <h1 class="free-custom-head">预约投保</h1>
      <div @click="goBack" class="top-img-btn"><img src="./../imgs/back-arrow1.png" alt="" class="image"></div>
    </div>
    <div class="productContent content-wrap" @scroll="handleScroll" style="margin-top:1rem" id="infor" v-if="this.pkProduct === 'smart'">
      <template class="product-smart">
        <div class="order-head-img"><img src="./../imgs/product/smart/smart.png" alt="" style="width:100%"></div>
        <div class="order-tou-bao-content">
          <p class="content-title">健康有约保障计划智选版</p>
          <p class="content-desc">保障范围</p>
          <div class="content-detail">
            <!-- 遍历循环main拿到每一条数据 -->
            <main style="display:table">
              <section style="display:table-row;line-height: .5rem;" v-for="(item) in dataItemSmart" :key='item.index'>
                  <aside calss="table-cell-left" style="display:table-cell">
                    <!--左侧栏内容-->
                    <p style="width:1.6rem">{{item.title}}</p>
                  </aside>
                  <article calss="table-cell-right" style="display:table-cell">
                      <!--右侧栏内容-->
                      <p>{{item.desc}}</p>
                  </article>
              </section>
          </main>
          </div>
        </div>
        <div class="order-tou-bao-content-tabbar">
          <div class="nav-wrap box-flex" :class="{fixed: topFixed}">
            <div class="flex" :class="{active: selectedNav === 1}" @click.stop="handleNav(1)">产品介绍</div>
            <div class="flex" :class="{active: selectedNav === 2}" @click.stop="handleNav(2)">购买须知</div>
            <div class="flex" :class="{active: selectedNav === 3}" @click.stop="handleNav(3)">产品条款</div>
            <div class="flex" :class="{active: selectedNav === 4}" @click.stop="handleNav(4)">理赔服务</div>
            <div class="flex" :class="{active: selectedNav === 5}" @click.stop="handleNav(5)">常见问题</div>
          </div>
          <div class="info-content">
            <tabItemIntroduce ref="tabItemIntroduce" key="1"></tabItemIntroduce>
            <tabItemKonws ref="tabItemKonws" key="2"></tabItemKonws>
            <tabItemItem ref="tabItemItem" key="3"></tabItemItem>
            <tabItemLiPei ref="tabItemLiPei" key="4"></tabItemLiPei>
            <tabItemAQ ref="tabItemAQ" key="5"></tabItemAQ>
          </div>
        </div>
      </template>
    </div>

逻辑部分代码如下：

 mounted () {
    let personToken = this.$route.query.token
     // 处理高度问题 获取到每个tabImag的高度
    this.$nextTick(() => {
      // 图片太长 图片未加载完就已经拿到值；设个定时器
      setTimeout(() => {
        this.offsetTop1 = this.$refs.tabItemIntroduce.$el.offsetTop
        this.offsetTop2 = this.$refs.tabItemKonws.$el.offsetTop
        this.offsetTop3 = this.$refs.tabItemItem.$el.offsetTop
        this.offsetTop4 = this.$refs.tabItemLiPei.$el.offsetTop
        this.offsetTop5 = this.$refs.tabItemAQ.$el.offsetTop
        console.log(this.$refs.tabItemIntroduce.$el.offsetTop)
      }, 600)
    })
  },
methods () {
 // nav选择
    handleNav (num) {
      // console.log(num)
      this.selectedNav = num
      // 选中的ref对应的元素
      this.setScroll(this['offsetTop' + num]) // 敲黑板重点来了；
    },
setScroll (offsetTop) {
      // console.log('点击切换后后的setScroll:::', offsetTop)
      window.document.getElementById('infor').scrollTop = offsetTop - 90 // 一切换就更改滚动距离
    },
 handleScroll () {
      let scrollTop = window.document.getElementById('infor').scrollTop // 拿到整个大div的scrollTop
      let font = window.document.documentElement.style.fontSize.slice(0, -2) // 50
      if (scrollTop > 11.4 * font) { //当到达一定高度时Tab进行固定
        this.topFixed = true
      } else {
        this.topFixed = false
      }
      // console.log('scrollTop::;', scrollTop)
      // console.log('this.offsetTop1', this.offsetTop1)
      // console.log('this.offsetTop2', this.offsetTop2)
      // console.log('this.offsetTop3', this.offsetTop3)
      // console.log('this.offsetTop4', this.offsetTop4)
      // console.log('this.offsetTop5', this.offsetTop5)
      if (scrollTop < this.offsetTop2 - 650) {  // 需注意这里数据取值有点问题，值是我测试调来的有点出入
        this.selectedNav = 1
      } else if (scrollTop < this.offsetTop3 - 200) { // 需注意这里数据取值有点问题，值是我测试调来的有点出入
        this.selectedNav = 2
      } else if (scrollTop < this.offsetTop4 - 200) { // 需注意这里数据取值有点问题，值是我测试调来的有点出入
        this.selectedNav = 3
      } else if (scrollTop < this.offsetTop5 - 200) { // 需注意这里数据取值有点问题，值是我测试调来的有点出入
        this.selectedNav = 4
      } else {
        this.selectedNav = 5
      }
    }
}

Css部分

 .fixed { // tab定在头部
      width:100%;
      height:100%;
      position: fixed;
      z-index: 1;
      top: 1rem;
      left: 0;
      right: 0;
      // box-shadow: 0 6px 10px rgba(0,0,0,0.1);
    }

实现该页面时遇到的问题如下：（当时觉得很灵异）

页面一渲染拿到的每个this.$refs..... 高度都是550左右；

和单独打印this.$refs看到offsetTop值有很大出入；

百思不得其解，后来经同事指点是没有‘tab’对应的内容值，

图片还没有加载完就已经赋值了（我的图片很长很长）

后来又说是ref拿到的是DOM，image不算DOM，没有计算高度，后期需要看一下DOM的渲染内容；

今天先到这里，一会准备下班了，后期再看看代码

打印对象和直接取值有出入