vue 网站右侧楼层导航效果折腾小记

前沿

---

在项目中遇到楼层导航的需求，于是乎就开始撸代码，需要加一些动画，这时候就需要用到scroll属性，有些忘记了，就先好好温习了一下。最终还是搞出来了。补：这个组件需要引用jquery,后期尝试引用vue搞一个，期待更新。

---

step1:先新建一个公共的文件就叫RightNavigation.vue。

<template>
  <div class="FloorNavigation">
    <div class="CenterFixed">
      <ul>
        <li style="line-height: 36px;">导航</li>
        <li v-for="(item,index) in FixedNavigation"
            v-html="item"
            @click="rightFixed(index)"
            :class="FixedR(index)"
            v-bind:key="index"></li>
        <li class="goTop"
            @click="goTop">返回顶部</li>
      </ul>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
export default {
  props: ["FixedNavigation"],
  data() {
    return {};
  },
  mounted() {
    window.addEventListener("scroll", this.myScroll);
  },
//解决其他页面未使用报错的bug
  destroyed() {
    window.removeEventListener("scroll", this.myScroll);
  },
  methods: {
    rightFixed(index) {
      console.log(index);
      let topVal = $(".rightFixed" + index).offset().top - 50;
      $("body,html").animate({ scrollTop: topVal }, 1000);
    },
    goTop() {
      $("body,html").animate({ scrollTop: 0 }, 1000);
    },
    FixedR(index) {
      return "rFixed_" + index;
    },
    myScroll() {
      this.bodyScroll = $(window).scrollTop();
      // console.log(this.bodyScroll);
      let fixedLi = $(".FloorNavigation ul li");
      let goTopButton = $(".goTop");
      let right_0 = $(".rightFixed0").offset().top,
        right_1 = $(".rightFixed1").offset().top,
        right_2 = $(".rightFixed2").offset().top,
        right_3 = $(".rightFixed3").offset().top,
        right_4 = $(".rightFixed4").offset().top,
        right_5 = $(".rightFixed5").offset().top;
      if (this.bodyScroll <= right_1 - 100) {
        goTopButton.fadeOut(300).css("display", "none");
      } else {
        goTopButton.fadeIn(300).css("display", "block");
      }
      if (this.bodyScroll >= right_0 - 100) {
        fixedLi
          .eq(1)
          .addClass("fixedLiActive")
          .siblings()
          .removeClass("fixedLiActive");
      }
      if (this.bodyScroll >= right_1 - 100) {
        fixedLi
          .eq(2)
          .addClass("fixedLiActive")
          .siblings()
          .removeClass("fixedLiActive");
      }
      if (this.bodyScroll >= right_2 - 100) {
        fixedLi
          .eq(3)
          .addClass("fixedLiActive")
          .siblings()
          .removeClass("fixedLiActive");
      }
      if (this.bodyScroll >= right_3 - 100) {
        fixedLi
          .eq(4)
          .addClass("fixedLiActive")
          .siblings()
          .removeClass("fixedLiActive");
      }
      if (this.bodyScroll >= right_4 - 100) {
        fixedLi
          .eq(5)
          .addClass("fixedLiActive")
          .siblings()
          .removeClass("fixedLiActive");
      }
      if (this.bodyScroll >= right_5 - 100) {
        fixedLi
          .eq(6)
          .addClass("fixedLiActive")
          .siblings()
          .removeClass("fixedLiActive");
      }
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.FloorNavigation {
  width: 38px;
  height: 100%;
  position: fixed;
  top: 0px;
  right: 40px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  .CenterFixed {
    ul {
      width: 38px;
      span {
        display: block;
        width: 38px;
        height: 38px;
        background: #93abc2;
        text-align: center;
        margin-top: 5px;
        color: white;
        line-height: 38px;
      }
      li {
        width: 44px;
        height: 44px;
        padding: 5px;
        background: #93abc2;
        text-align: center;
        margin-top: 1px;
        color: white;
        word-wrap: break-word;
        line-height: 18px;
        overflow: hidden;
        cursor: pointer;
      }
    }
    li:hover {
      background-color: #505f6e;
    }
    li:first-child {
      background-color: #f9a101;
      cursor: text;
    }
    li:first-child:hover {
      background-color: #f9a101;
    }
    li:last-child {
      background-color: #a7a8a8;
    }
    li:last-child:hover {
      background-color: #a7a8a8;
    }
  }
}
.fixedLiActive {
  background-color: #505f6e !important;
}
.goTop {
  display: none;
}
</style>

step2:引用方法

<template>
  <div class="FundProductsMoneyDetails">
    <!-- 每一层只需要加上classname就好了rightFixed0，一般是5个，少了就用隐藏的div补（这是个缺陷）暂时先这样。 -->
    <div class="AllStyle rightFixed0">基金资料</div>
    <div class="AllStyle rightFixed1">业绩表现</div>
    <div class="AllStyle rightFixed2">风险概述</div>
    <div class="AllStyle rightFixed3">收益统计</div>
    <div class="AllStyle rightFixed4">在险价值</div>
    <div class="AllStyle rightFixed5">资产概览</div>
    <!-- 右侧楼层导航 -->
    <fixedRight :FixedNavigation="FloorNavigation"></fixedRight>
  </div>
</template>
<script>
import $ from "jquery";
export default {
  components: {
    fixedRight:require('@/components/RightNavigationBar/index').default
  },
  data() {
    return {
      // 楼层上显示的文字，灵活控制
      FloorNavigation: [
        "基金资料",
        "业绩表现",
        "风险概述",
        "收益统计",
        "在险价值",
        "资产概览"
      ],
    };
  },
  methods: {}
};
</script>
<style  rel="stylesheet/scss" lang="scss">
.FundProductsMoneyDetails {
  width: 100%;
  .AllStyle{
    width:100%;
    height:600px;
    border:1px solid red;
  }
  }
</style>

结束语：

这个公共组件就可以使用了，里边还有一些方法不够实用，就是不能灵活控制有多个，必须相匹配，希望有小伙伴多多指教，可以写多个灵活控制楼层的。