vue3 滚动切换菜单栏,点击菜单又滚动到对应的高度

最近在看《认知觉醒》的元认知，得到的收获是：

1、学习前人的智慧来反思己身。

2、每日三省吾身，将反思复盘的方法用于实践

3、反思自己反思的过程和方法

所以今天周末休息，就开始敲代码，反思下昨天写的代码，以及自身是如何思考的；

学习前人的智慧来反思己身

  一开始，首先采用的方法是用v-show方法进行切换，根据设置不同的tabIndex,来显示不同的模块。

  后来需要增加动画滚动切换菜单栏的效果，就用走马灯进行设置，这两种方法，总感觉缺了一点什么，走马灯没有滚动条，是直接向上向下滚动时，整体切换菜单栏，效果总是差了一点。

  再后来，自己写原生的滚动条，给元素增加监听，滚动事件scroll来设置，但是切换效果不是很理想。

  最后，跳出问题本身，想到element-plus本身就有滚动条，就直接用element-plus的插件scrollBar来做滚动设置。

  具体案例说明如下：

  在前端开发中，很多时候都需要用到点击菜单栏，滚动条滚动到对应的高度；同时在滚动的时候，切换菜单栏。

  主要用到的框架：vue3.0+element-plus,主要通过使用 setScrollTop 与 setScrollLeft 方法，可以手动控制滚动条滚动：

    setScrollTop:滚动条垂直方向滚动一定距离

    setScrollLeft:滚动条水平方向滚动一定距离

    对应的代码：

<script setup>
import { reactive, ref } from "vue";

let bannerBox = reactive({
  tabIndex: 1,
  testHeight:500,
});


//点击菜单栏，滚动滚动条
const testRef = ref();
const changeTabIndex = (Index) => {
  let scrollTop = bannerBox.testHeight * (Index - 1)
  testRef.value.setScrollTop(scrollTop)
};

//滚动时，切换菜单栏
const doScroll = (event)=>{
  let scrollTop = event.scrollTop;
  let index = Math.floor( ( (scrollTop + bannerBox.testHeight) *100 ) / (bannerBox.testHeight * 100) )
  bannerBox.tabIndex = index;
}

</script>

<template>
  <main>
    <div class="test">
      <div class="test_header">
        <div class="test_header_1" @click="changeTabIndex(1)"  :class="{active:bannerBox.tabIndex == 1}">测试1</div>
        <div class="test_header_1" @click="changeTabIndex(2)"  :class="{active:bannerBox.tabIndex == 2}">测试2</div>
        <div class="test_header_1" @click="changeTabIndex(3)"  :class="{active:bannerBox.tabIndex == 3}">测试3</div>
        <div class="test_header_1" @click="changeTabIndex(4)"  :class="{active:bannerBox.tabIndex == 4}">测试4</div>
        <div class="test_header_1" @click="changeTabIndex(5)"  :class="{active:bannerBox.tabIndex == 5}">测试5</div>
      </div>
      <div class="test_content">
        <div class="test_content_box">
          <el-scrollbar ref="testRef" @scroll="doScroll">
            <div class="test_box_item bg1">1</div>
            <div class="test_box_item bg2">2</div>
            <div class="test_box_item bg3">3</div>
            <div class="test_box_item bg4">4</div>
            <div class="test_box_item bg5">5</div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </main>
</template>
<style scoped lang="less">
//隐藏滚动条
::-webkit-scrollbar{
  width: 0;
}
//样式穿透，隐藏滚动条
:deep(.el-scrollbar__bar.is-vertical){
  width:0;
}
.test {
  position: relative;
  div {
    // border: 1px solid;
  }
  .active{
    background:brown;
  }
  .test_header {
    background: #ffffff;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    .test_header_1 {
      width: 20%;
    }
  }
  .test_content {
    background: green;
    height: 500px;
    position: relative;

    .test_content_box {
      overflow: auto;
      height: 500px;
      // width: 400px;
      position: absolute;
      width:100%;
      color:#fff;
      // display: flex;
      // flex-direction: column;
      right: 0;

      .test_box_item {
        height: 500px;
        // width: 400px;
        background: yellow;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
      }
      .bg1{
        background:#f83303;
      }
      .bg2{
        background:pink;
      }
      .bg3{
        background:black;
      }
      .bg4{
        background:blue;
      }
      .bg5{
        background:green;
      }
    }
  }
}
</style>

每日三省吾身，将反思复盘的方法用于实践

  在思考问题时，不能执着于技术的卡点，技术的实现，而更多的深入理解项目，以及自身的解决思路。

  首先，在解决问题的方向上。我需要做的是一个滚动时，菜单栏跟着切换。那么解决问题一般都有三种思路：

        上策：用已经实现过的方法解决问题。已经实现的方案问题少，而且实现效率高，速度快。性能也比较可靠，毕竟已经在实际运用中，一个字：爽！

        中策：寻找合适的插件，解决问题。插件一般都有一定的局限性，在使用的时候，需要考虑到插件有哪些局限性，在项目使用的过程中要考虑到如何解决这些局限性问题，或者减轻到不影响项目效果的程度。

        下策：用原生的方法解决问题。不是说原生不好，而是原生的方法，自己就需要考虑很多的问题，要考虑滚动过程中，滚动条的问题，在vue3中如何实现，数据要绑定，元素监听等等，要考虑的多，实现时就要花费更多的事件处理这些逻辑。

反思自己反思的过程和方法

  程序员在项目开发过程中，就担心的就是卡点，就是对程序的死磕。有时候，我在解决一个问题，没有找到思路的时候，或者当精力用尽的时候，而自己却没觉察到。如在做测试时，自己有时候，在实现一个方法，寻找了多个方法实现的时候，总觉得差那么一点点，但是又找不到这一点点的差距在哪里，就会不停的去做项目测试，不停的调整细节，试图将差的一点点问题找出来，这时候，就陷入了一种“死磕”的状态，这种状态下，效率是非常低下的，自身思维陷入一个怪圈，一直重复了前面的操作：寻找新方法 -> 调整代码 -> 测试效果 -> 再寻找新方法，如此循环。

  所以，这个时候，就需要适当的打断自己，从不同的角度去反思自己思考的过程，跳出当前的思维循环，从更外的场景去看问题，就如上面遇到的问题，跳出技术，直接寻找合适的插件，运用他人现成的方案去解决问题。

  在遇到“死磕”状态时，不如站起身来，去倒杯水，转转圈，调整一下自身的状态，思考，换个角度去思考问题，也许有更多的收获。