Vue element tabs 点击锚点定位 , 鼠标滚动定位

原创

已于 2023-08-20 15:55:48 修改 · 7.3k 阅读

47 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #scss #elementui #vue #前端

于 2022-04-02 20:21:37 首次发布

该博客介绍了如何在Vue.js应用中实现卡片式标签页的滚动联动和平滑滚动效果。通过监听`@scroll`事件和`@tab-click`事件，动态调整内容区域的高度并实现平滑滚动到指定标签页的内容。代码示例展示了如何使用`v-for`指令遍历数据，以及结合JavaScript实现滚动到底部时切换标签页和平滑滚动动画。

一、效果图

在这里插入图片描述

二、代码

html

<el-tabs
      class="customer-tab"
      type="card"
      @tab-click="jump"
      v-model="tabName"
    >
      <el-tab-pane
        v-for="(tab, index) in tabs"
        :name="tab.refName"
        :key="index"
        :label="tab.name"
      ></el-tab-pane>
    </el-tabs>
    <div
      class="scroll-content"
      @scroll="onScroll"
      :style="
        'overflow-x: hidden; overflow-y: auto;height:' + contentStyleObj.height
      "
    >
      <!-- 用户管理 -->
      <div :ref="tabs[0].refName" class="scroll-item">
        <div class="line-name">
          <h2>{
   
   {
   
    tabs[0].name }}</h2>
        </div>
        <div>
          <p
            style="height: 40px"
            v-for="item in [
              0, 1, 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
            ]"
            :key="item"
          >
            待发货符合规范化如故
          </p>
        </div>
      </div>
      <!-- 配置管理 -->
      <div :ref="tabs[1].refName" class="scroll-item">
          <div class="line-name">
          <h2>{
   
   {
   
    tabs[1].name }}</h2>
        </div>
        <div>
          <p
            style="height: 40px"
            v-for