点击按钮，自定义滚轮，滑到某个位置

saadiya~

于 2024-03-19 09:53:29 发布

阅读量366

点赞数 9

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_57997609/article/details/136832359

版权

即实现下方图中，点击左侧对应按钮，右侧滑动到对应的组件位置

具体实现代码如下

 <div id="big_div">
    <div class="left_div">
      <div class="text_div">
        <div class="first_text">设备在线分析</div>
        <div :class="is_index == 0 ? 'two_text sel_div' : 'two_text '" @click="handleSel(0, 'rsuOnline')">
          <div class="img"><img v-if="is_index == 0" src="@/assets/images/三角形 3@2x.png" alt=""></div>
          <div>RSU在线分析</div>
        </div>
        <div :class="is_index == 1 ? 'two_text sel_div' : 'two_text '" @click="handleSel(1, 'obuOnline')">
          <div class="img"><img v-if="is_index == 1" src="@/assets/images/三角形 3@2x.png" alt=""></div>
          <div>OBU在线分析</div>
        </div>
      </div>
      <div class="text_div">
        <div class="first_text">设备故障分析</div>
        <div :class="is_index == 2 ? 'two_text sel_div' : 'two_text '" @click="handleSel(2, 'rsuMalfunction')">
          <div class="img"><img v-if="is_index == 2" src="@/assets/images/三角形 3@2x.png" alt=""></div>
          <div>RSU故障分析</div>
        </div>
        <div :class="is_index == 3 ? 'two_text sel_div' : 'two_text '" @click="handleSel(3, 'obuMalfunction')">
          <div class="img"><img v-if="is_index == 3" src="@/assets/images/三角形 3@2x.png" alt=""></div>
          <div>OBU故障分析</div>
        </div>
      </div>
    </div>
    <div class="right_div">
      <!-- rsuOnline 组件 -->
      <div id="rsuOnline">
        <rsuOnline />
      </div>
      <!-- obuOnline 组件 -->
      <div id="obuOnline">
        <obuOnline />
      </div>
      <!-- rsuMalfunction 组件 -->
      <div id="rsuMalfunction">
        <rsuMalfunction />
      </div>
      <!-- obuMalfunction 组件 -->
      <div id="obuMalfunction">
        <obuMalfunction />
      </div>

    </div>
  </div>

//跳转方法
 handleSel(i, componentName) {
      this.is_index = i
      document.getElementById(componentName).scrollIntoView({ behavior: "smooth", block: 'start' });
    },