hemall.terabimsoft.com.cn/plugins/shop_server/components/templateTwo/floor-nav.vue

<!--  -->
<template>
  <div id="floor-nav">
    <div class="floor-nav-img" v-if="basicSet.pc_temp2_set && basicSet.pc_temp2_set.logo_src">
      <img :src="basicSet.pc_temp2_set.logo_src" alt="">
    </div>
    <div class="nav" v-if="basicSet.pc_temp2_set">
      <div class="nav-item" @click="jump(index)" :class="{'active-nav': currentClass == index}" v-for="(item,index) in basicSet.pc_temp2_set.module_diy_name" :key="index">{{item.name}}</div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  data () {
    return {
      currentClass: 0,
      navArr: null,
      scroll: null,
      now: null,
      last: null,
      timer: null
    };
  },

  activated() {},

  components: {},

  computed: {
    ...mapState(['basicSet'])
  },

  mounted() {
    console.log("监听：：滚动位置，设置左侧导航栏")
    this.initData();
    window.addEventListener("scroll", this.throttleFn, true);
  },
  destroyed(){
    console.log("销毁：：：监听滚动")
    this.initData();
    window.removeEventListener("scroll", this.throttleFn, true);
  },

  methods: {
    initData(){
      this.navArr = null;
      this.scroll = null;
    },
    throttleFn() {
      // 节流
      let that = this;
      let interval = 100;
      that.now = +new Date();
      if (that.last && that.now - that.last < interval) {
        clearTimeout(that.timer);
        that.timer = setTimeout(() => {
          that.last = that.now;
          that.loadSroll();
        }, interval);
      } else {
        that.last = that.now;
        that.loadSroll();
      }
    },
    jump(index) {
      if(!this.navArr){
        this.navArr = document.getElementsByClassName("nav-section");
      }
      setTimeout(() => {
        this.$nextTick(() => {
          let jump = this.navArr;
          // 获取需要滚动的距离
          let total = jump[index].offsetTop - 180;
          window.scrollTo(0, total);
          // // Chrome
          // document.body.scrollTop = total;
          // // Firefox
          // document.documentElement.scrollTop = total;
          // // Safari
          // window.pageYOffset = total;
        });
      }, 20);
    },
    loadSroll() {
      let that = this;
      this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
      if(!this.navArr){
        this.navArr = document.getElementsByClassName("nav-section");
      }
      for (let i = this.navArr.length - 1; i >= 0; i--) {
        if (that.scroll >= this.navArr[i].offsetTop - 220) {
          that.currentClass = i;
          return;
        }
      }
    }
  }
}

</script>
<style lang='scss' rel='stylesheet/scss' scoped>
#floor-nav{
  height: auto;
  width: 110px;
  text-align: center;
  position: fixed;
  top: calc(50% - 110px);
  margin-left: -140px;
  z-index: 999;

  .floor-nav-img{
    width: 95px;
    height: 55px;
    margin: 0 auto;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .nav{
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 0px 20px 0px rgba(4, 0, 0, 0.05);
    .nav-item{
      display: inline-block;
      background: #fff;
      // line-height: 44px;
      cursor: pointer;
      width: 100%;
      font-size: 14px;
      position: relative;
      overflow: hidden;
      margin-top: -4px;
      // height: 44px;
      padding: 12px 0;
      // white-space: nowrap;
      // text-overflow: ellipsis;
      &::after{
        content: '';
        position: absolute;
        width: 85px;
        height: 1px;
        background: #E6E6E6;
        left: 12px;
        bottom: 0;
      }
    }
    .active-nav{
      color: #F2F3F5;
      background: var(--color);
      font-weight: bold;
      &::after{
        height: 0;
      }
    }
  }
}
</style>