【vue】仿淘宝商品详情---实现滚动显隐标签页&锚点导航

先看图

利用css的opacity实现了在滚动时对导航栏透明度的改变，达到导航栏滚动显隐效果

说明

1. 封装成组件复用的话，首先快捷键的每一项数据需要父组件传入；在父组件定义一个数组作为右侧导航栏的数据；由于左侧区域的某一块内容没有数据时，其对应的导航项不显示；
2. 要给每一块的内容最外层绑定ref，是为了获取该dom元素，通过点击导航栏某一项时，让页面可以滚动到对应的元素内容；
3. . 导航在抽屉里做的，给最外层绑定ref=“drawer”，可以获取到当前页面最外层的dom元素，根据最外层容器的dom元素来获取滚动高度；
4. 组件要接收导航栏数据、接收当前是否是抽屉(默认为抽屉，传false为普通正常页面)、接收当前页面所有的dom元素、接收样式(显示在页面的左侧还是右侧)
5. 统一封装滚动方法：将滚动方法放在定时器中，在获取到最新DOM元素时，添加该定时器；在组件销毁时，清除定时器；定时器中主要功能：当滚动上去的高度+可见区域的高度==全文高度，导航栏选中最后一项；当第一项的距离可视窗口顶部距离>0，导航栏选中第一项。
6. 点击方法：点击导航栏某一项，内容区域滚动到可视区域的顶部，导航栏选中该项。

<template>
  <div class="HSDetail">
    <div class="hsd_nr">
      <div ref="header" :style="'opacity:' + opacity" class="header acea-row row-center-wrapper">
        <div
          v-for="(item, index) in navList"
          :class="navActive === index ? 'on' : ''"
          :key="index"
          class="item"
          @click="asideTap(index)"
        >{{ item }}</div>
      </div>
      <!-- vant的轮番图 -->
      <div id="title0" class="detail_swipe">
        <van-swipe :autoplay="3000" class="swipe" indicator-color="white">
          <van-swipe-item>1</van-swipe-item>
          <van-swipe-item>2</van-swipe-item>
          <van-swipe-item>3</van-swipe-item>
          <van-swipe-item>4</van-swipe-item>
        </van-swipe>
      </div>
      <div style="height: 20px" />
      <div v-for="(val, index) in list" :ref="val.key" :key="index" class="content">
        <p :id="'title'+(1+index)">{{ val.name }}</p>
        <ul>
          <li v-for="item in 30" :key="item">内容：{{ index + 1 }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HSDetail',
  components: {},
  data() {
    return {
      showBase: false,
      navList: ['商品', '推荐', '详情'],
      opacity: 0,
      navActive: 0,
      list: [
        {
          name: '相关推荐',
          key: 'ref1'
        }, {
          name: '详情介绍',
          key: 'ref2'
        }
      ]

    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    handleScroll() {
      // console.log('监听滚动')
      const top = document.body.scrollTop || document.documentElement.scrollTop
      let opacity = top / 140
      opacity = opacity > 1 ? 1 : opacity
      this.opacity = opacity
    },
    asideTap(a) {
      this.$nextTick(() => {
        const index = a
        this.navActive = index
        const element = document.querySelector('#title' + index) // 返回文档中匹配指定 CSS 选择器的一个元素
        const top = // 网页被卷去的高scrollTop  网页可见区域高：offsetHeight (包括边线的宽);
          element.offsetTop - this.$refs.header.offsetHeight - window.scrollY // scrollY返回文档当前垂直滚动的像素数
        window.scrollBy({ top, left: 0, behavior: 'smooth' }) // 把内容滚动指定的像素数
      })
    },

  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.HSDetail .header {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: fixed;
  left: 0;
  top: 1.2rem;
  width: 100%;
  height: 0.96rem;
  font-size: 0.3rem;
  color: #050505;
  background-color: #fff;
  z-index: 11;
  border-bottom: 0.01rem solid #eee;
}
.HSDetail .header .item {
  position: relative;
  margin: 0 0.35rem;
}
.HSDetail .header .item.on:before {
  position: absolute;
  width: 0.6rem;
  height: 0.05rem;
  background-repeat: no-repeat;
  content: "";
  background: linear-gradient(to left, #ff3366 0%, #ff6533 100%);
  background: -webkit-linear-gradient(to left, #ff3366 0%, #ff6533 100%);
  background: -moz-linear-gradient(to left, #ff3366 0%, #ff6533 100%);
  bottom: -0.1rem;
}
.detail_swipe {
  .swipe .van-swipe-item {
    color: #fff;
    font-size: 0.4rem;
    line-height: 4.08333rem;
    text-align: center;
    // background-color: #f8c980;  替换为渐变色
    background-image: -moz-linear-gradient(
      90deg,
      rgb(197, 255, 158),
      rgb(255, 204, 247)
    );

    background-image: -webkit-linear-gradient(
      90deg,
      rgb(197, 255, 158),
      rgb(255, 204, 247)
    );

    background-image: linear-gradient(
      90deg,
      rgb(197, 255, 158),
      rgb(255, 204, 247)
    );
  }
}
.HSDetail {
  .hsd_hande {
    position: fixed;
    width: 100%;
    z-index: 10;
  }
  .hsd_nr {
    position: relative;
    top: 1.25rem;
    height: 22rem;
  }
}
</style>

完成~