纯VUE实现手写轮播图

        使用VUE也有一段时间了，今天在工作过程中用VUE手写了一个简单的VUE轮播图，在这里分享一下。

        （一）实现思路：

                和原生JS的实现思路一样只不过是代码展现方式有所不同，同样是给外侧父盒子限定宽度和高度，之后添加overflow: hidden;属性。然后在内部展示轮播内容，利用transition以及transfrom实现轮播。

        （二）效果图

         （三）代码

<template>
    <div class="Tuan_box">
      <div class="rule_Box">
        <p class="rule_title">拼团规则<i class="iconfont icon-wenhao"></i></p>
        <p class="rule_num">9999人正在拼团</p>
      </div>
      <div class="Tuan_swiper_box" ref="swiper_box" :style="swiperStyle">
        <div
          @mouseleave="swiperplay()"
          @mouseenter="swiperStop()"
          class="swiper_item"
          v-for="(item, index) in 10"
          :key="index"
        >
          <div class="headImag_box">
            <img
              src="https://www.jszg.com/static/platform/pic/img_headpic.png"
              alt=""
            />
          </div>
          <div class="Tuan_name">188****8888</div>
          <div class="right_btn">
            <div class="Tuan_info">
              <p class="Tuan_info_top">还差99人拼成</p>
              <p class="Tuan_info_bottom">剩余23：23：23</p>
            </div>
            <div class="btn">
              <span>去拼团</span>
            </div>
          </div>
          <div class="bian"></div>
        </div>
      </div>
      <div class="Tuan_more">
        <span>查看更多</span><i class="iconfont icon-jiantou"></i>
      </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      // 轮播图函数
      swiper: {
        active: 1, //当前活跃的值
        time: 3000, //自动轮播的间隔
      },
      // 自动轮播事件
      AutoSwiper: null,
    };
}，
  mounted() {
    this.swiperplay();
  },
  methods: {
    // 轮播图开始函数
    swiperplay() {
      console.log("开始轮播");
      this.AutoSwiper = setInterval(() => {
        if (this.swiper.active < 4) {
          this.swiper.active++;
        } else {
          this.swiper.active = 1;
        }
      }, this.swiper.time);
    },
    // 轮播图暂停函数
    swiperStop() {
      console.log("暂停轮播");
      clearInterval(this.AutoSwiper);
    },
  },
  computed: {
 // 轮播图计算
    swiperStyle() {
      return `transform: translateY(-${4.4375 * this.swiper.active}rem);`;
    },
  },
<style lang="less" scoped>

  .Tuan_box {
    overflow: hidden;
    margin-top: 0.8125rem;
    width: 100%;
    height: 4.4375rem;
    background: #323232;
    border-radius: 0.1875rem;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .rule_Box {
      width: 9rem;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: linear-gradient(90deg, #bf9b61, #edd7b8);
      border-radius: 0.1875rem;

      p {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }
      .rule_title {
        font-size: 1.125rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #373737;

        .icon-wenhao {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
        }

        .icon-wenhao::before {
          font-size: 0.9375rem;
          font-weight: 400;
          color: #373737;
        }
      }

      .rule_num {
        font-size: 0.8125rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #6b4b25;
      }
    }

    .Tuan_swiper_box {
      transition: all 0.3s ease;
      padding: 0 4.3125rem;
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .swiper_item {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 25.9375rem;
        height: 100%;

        .headImag_box {
          width: 2.25rem;
          height: 2.25rem;
          overflow: hidden;
          border-radius: 50%;
          img {
            width: 100%;
          }
        }

        .Tuan_name {
          max-width: 5.625rem;
          margin-left: 0.625rem;
          font-size: 0.875rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #fbebe9;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .right_btn {
          display: flex;
          flex-direction: row;
          align-items: center;
          .Tuan_info {
            margin-left: 2.625rem;
            font-size: 0.75rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            .Tuan_info_top {
              color: #f3f3f3;
            }
            .Tuan_info_bottom {
              color: #ff8a47;
            }
          }
          .btn {
            cursor: pointer;
            margin-left: 0.6875rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 4.75rem;
            height: 2.1875rem;
            background: linear-gradient(144deg, #ff5a25, #ff7d3a);
            border-radius: 0.3125rem;
            span {
              font-size: 1rem;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #ffffff;
            }
          }
        }
        .bian {
          height: 2.1875rem;
          flex: 1;
          border-right: 1px solid #fbebe9;
        }
      }
      .swiper_item:nth-child(2n) {
        justify-content: flex-end;
        .bian {
          display: none;
        }
      }
    }
    .Tuan_more {
      margin-right: 2.625rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      font-size: 0.875rem;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f9f9f9;

      i {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }
      .icon-jiantou::before {
        font-size: 0.75rem;
        color: #f9f9f9;
      }
    }
  }
</style>

小白前端，不足之处还请指正