导航跳代码

本文适用新手

在日常开发中，会有各种需要实现的东西，我在刚进入前端开发时遇到的第一个问题就是导航条了

因为不喜欢用ui组件的原因，各种样式基本都需要自己手写css，主要是为了在技术不足的情况下提升技术。同样，也不能耽误项目整体进度。

先看代码吧

<div class="sidebar">
    <div>个人主页</div>
    <div :class="1 == count ? 'k' : ''">
        <div @click="up(1)">
            <div :class="1 == a ? 'c' : ''">12312</div>
        </div>
        <div @click="up1(1)">
            <router-link to="/home">1231</router-link>
            <router-link to="/home/about">1231</router-link>
        </div>
    </div>
    <div :class="2 == count ? 'k' : ''">
        <div @click="up(2)">
            <div :class="2 == a ? 'c' : ''">12312</div>
        </div>
        <div @click="up1(2)">
            <router-link to="/home">1231</router-link>
            <router-link to="/home/about">1231</router-link>
        </div>
    </div>
    <div :class="3 == count ? 'k' : ''">
        <div @click="up(3)">
            <div :class="3 == a ? 'c' : ''">12312</div>
        </div>
        <div @click="up1(3)">
            <router-link to="/home">1231</router-link>
            <router-link to="/home/about">1231</router-link>
        </div>
    </div>
</div>

// <script setup lang="ts">
// vue3 新实验语法
import { ref } from "vue";
let count = ref<number>(1);
const up = (e: number) => e === count.value ? count.value = 0 : count.value = e
let a = ref<number>(1);
const up1 = (e: number) => a.value = e

.sidebar {
  &::-webkit-scrollbar {
    display: none;
  }

  display         : flex;
  flex-direction  : column;
  overflow-y      : auto;
  background-color: #001529;
  color           : rgba(255, 255, 255, 0.7);
  font-size       : 14px;

  a {
    text-decoration: none;
    color          : rgba(255, 255, 255, 0.7);
  }

  // 下拉样式切换
  .k {
    >div {
      &:nth-child(2) {
        >a {
          height : 50px;
          opacity: 1;
        }
      }
    }
  }

  .c{
    color: #fff;
  }


  >div {
    &:first-child {
      height         : 50px;
      display        : flex;
      justify-content: flex-start;
      align-items    : center;
      margin-left    : 20px;
      font-size      : 20px;
      font-weight    : 700;
      color          : #fff;
    }

    >div {
      &:nth-child(1) {

        >a,div {
          &:hover {
            color: #fff;
          }

          padding-left: 20px;
        }
      }

      &:nth-child(2) {
        .router-link-exact-active {
          color           : #fff;
          background-color: #0960bd;
        }

        >div,
        a {
          transition      : .5s;
          height          : 0;
          opacity         : 0;
          background-color: #0c2135;
          padding-left    : 40px;
        }
      }

      >a,div {
        width      : 200px;
        display    : flex;
        height     : 50px;
        align-items: center;
      }
    }
  }
}

代码讲解

样式

在样式这一块，难点应该是在滚动条上，我当时因为无法隐藏滚动条浪费了挺多时间的。

一行解决烦恼

-webkit-scrollbar {
    display: none;
}

css大部分使用nth-child，去找到节点，只有需要更改样式才使用类命名

下拉拉回有一个动画的效果，是通过设置过度时间、透明度、高度来控制的

从开始的没有高度，到后面给添加高度

.k {
>div {
  &:nth-child(2) {
    >a {
      height : 50px;
      opacity: 1;
    }
  }
}
}

交互部分

点击不同的位置，更改变量导致不同的效果。貌似不用js写不起来

vue3导航条组件

导航跳代码

先看代码吧

代码讲解

样式

交互部分