vue简单实现使用tab导航切换轮播图/走马灯的组件

很简单的一个小demo，废话不多说先上效果图：

开源的gitee地址：https://gitee.com/Yuzaki-Nasa/tab-swiper

简单的写了点注释

<template>
  <div id="main">
    <!-- tab-swiper -->
    <div class="tab-swiper container">
      <h1 class="module-title">tab导航</h1>
      <div class="swiper-box">
        <ul class="tab">
          <li :class="{ is_active: tabIndex == 0 }" @click="tabIndex = 0">
            标签一
          </li>
          <li :class="{ is_active: tabIndex == 1 }" @click="tabIndex = 1">
            标签二
          </li>
        </ul>
        <div class="swiper">
          <div class="content" :class="{ slider: tabIndex == 1 }">
            <div class="first-tab common">
              <div class="left">
                <img src="../assets/ui_img/swiper1.jpg" alt="" />
              </div>
              <div class="right">
                <div class="subtitle">
                  左边可以放导航图，也可以自己改成文本或视频等等，点击标签二就是不带右侧简介栏的占全空间的导航图，此处为摘要
                </div>
                <ul>
                  <li v-for="item of swiperContent" :key="item.id">
                    <div class="box">
                      <img :src="item.logo_url" alt="" />
                      <h3>{{ item.title }}</h3>
                    </div>
                    <p>
                      {{ item.content }}
                    </p>
                  </li>
                </ul>
              </div>
            </div>
            <div class="second-tab common">
              <div class="middle">
                <img src="../assets/ui_img/swiper2.jpg" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabIndex: 0, // 控制tab的切换
      swiperContent: [
        // tab1展示内容里右侧的内容
        {
          id: 0,
          logo_url: require('../assets/ui_img/logo1.png'),
          title: '标题一',
          content:
            '文本一文本一文本一文本一文本一文本一文本一文本一文本一文本一文本一文本一文本一文本一文本一文本一文本一'
        },
        {
          id: 1,
          logo_url: require('../assets/ui_img/logo2.png'),
          title: '标题二',
          content:
            '文本二文本二文本二文本二文本二文本二文本二文本二文本二文本二文本二文本二文本二'
        },
        {
          id: 2,
          logo_url: require('../assets/ui_img/logo3.png'),
          title: '标题三',
          content:
            '文本三文本三文本三文本三文本三文本三文本三文本三文本三文本三文本三文本三文本三文本三文本三文本三文本三文本三文本三'
        }
      ]
    }
  }
}
</script>

<style lang="scss">
/* 字体 */
@font-face {
  font-family: 'PingFangRegular';
  src: url('../assets/fonts/PingFangRegular.ttf');
}

@font-face {
  font-family: 'PingFangMedium';
  src: url('../assets/fonts/PingFangMedium.ttf');
}

body {
  font-family: 'PingFangMedium', PingFang SC;
  margin: 0;
}

/* 版心 */
.container {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
}

/* tab导航 开始 */
.tab-swiper {
  height: 880px;
  margin-bottom: 233px;
  .module-title {
    margin-bottom: 40px;
  }
  .swiper-box {
    height: 736px;
    position: relative;
    .tab {
      height: 32px;
      display: flex;
      justify-content: center;
      flex-wrap: nowrap;
      li {
        float: left;
        padding: 0 25px 16px;
        border-bottom: 4px solid transparent;
        font-size: 16px;
        color: #34364e;
        margin-right: 70px;
        font-weight: 400;
        z-index: 100;
      }
      li:last-child {
        margin-right: 0;
      }
      li.is_active {
        // 选中的tab更改字体颜色和出现底边框
        border-bottom: 4px solid #2271f7;
        color: #2271f7;
      }
      li:hover {
        cursor: pointer;
      }
    }
    .common {
      height: 780px;
    }
    .swiper {
      max-width: 1220px;
      height: 780px;
      position: absolute;
      top: 29px;
      background: #f8f8f8;
      border: 1px solid #f1f1f1;
      box-shadow: 0 2px 5px 0 rgba(27, 31, 35, 0.07),
        0 -2px 8px 0 rgba(26, 31, 43, 0.07);
      overflow: hidden; // 让超出边框的部分隐藏
      .content {
        width: 2440px; // 总宽设成x倍内容的宽度
        transition: all 0.5s; // 左右平滑滚动切换，动画为0.5s
        -webkit-transform: translateX(0);
        transform: translateX(0); // 进入页面时显示tab1内容
        .first-tab {
          float: left;
          width: 1220px;
        }
        .second-tab {
          float: left;
          width: 1220px;
        }

        .left {
          float: left;
          padding: 30px;
          img {
            width: 836px;
            height: 720px;
          }
        }

        .right {
          text-align: left;
          background: #fff;
          box-sizing: border-box;
          width: 324px;
          height: 780px;
          float: right;
          padding: 30px;
          .subtitle {
            font-family: 'PingFangRegular';
            font-size: 14px;
            color: #34364e;
            letter-spacing: 0.4px;
            line-height: 22px;
            font-weight: 600;
            margin-bottom: 35px;
          }
          ul {
            li {
              margin-bottom: 30px;
              .box {
                height: 27px;
                margin-bottom: 9.5px;
                img {
                  float: left;
                  width: 27px;
                  height: 27px;
                }
                h3 {
                  float: left;
                  font-family: 'PingFangRegular';
                  font-size: 16px;
                  color: #000000;
                  font-weight: 600;
                  line-height: 27px;
                  margin-left: 8px;
                }
              }

              p {
                font-size: 14px;
                color: #34364e;
                font-weight: 400;
                line-height: 22px;
                letter-spacing: 0.4px;
              }
            }
          }
        }

        .middle {
          height: 780px;
          box-sizing: border-box;
          overflow: hidden;
          padding: 30px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .slider {
        // 点击不同标签后，根据内容平移百分比切换展示内容
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
      }
    }
  }
}
/* tab导航 结束 */
</style>

完工~有帮上忙或者喜欢的话点个star吧，感谢！