mint-ui swipe组件源码解析

前叙

---

mint-ui组件库中swipe组件，实现的是常见的轮播图效果。但是它的实现方式，和常见的实现有所不同。
常见的实现方式： 通过移动轮播图的wrapper来实现item的切换效果(也就是修改wrapper的translate3d属性来实现)。如果支持循环播放，需要在首部插入一个最后一个轮播图item的clone版，以及在尾部插入一个第一个轮播图item的clone版。
swipe组件实现的方式： 只显示当前显示的轮播图item，当切换的时候，显示出当前item的前后相邻的两个item；通过设置三个item的translate3d来实现切换的效果。
两个实现方式的对比：

• 第一种方式，初始会渲染出所有的item，通过translate3d来实现切换和滑动，这种方式会启动硬件加速提升性能。但是毕竟是在所有轮播图的基础上的渲染。
• 第二种方式，通过切换item的display属性来实现对应item的显示和隐藏，虽然会引起回流和重绘，但是每个item的position为absolute，脱离文档流，所以并不会引起其他dom的回流和重绘。每个item的translate3d引发的渲染只是在当前item的基础上。
• 通过上面分析，可以得出： 如果轮播图的数量不多，第一种方式不会引起回流和重绘，并且translate引发渲染的item不多，性能相对好；但是轮播图的数量比较多的话，第二种性能相对比较好。

swipe接入示例

---

• html代码

  <div id="app">
      <div class="swipe-wrapper">
          <mt-swipe :auto="0" ref="swipeWrapper">
              <mt-swipe-item class="swip-item-1 item">1</mt-swipe-item>
              <mt-swipe-item class="swip-item-2 item">2</mt-swipe-item>
              <mt-swipe-item class="swip-item-3 item">3</mt-swipe-item>
          </mt-swipe>
      </div>
  
      <div class="button-wrapper">
          <button class="prev-button flex-item" @click="prev">prev</button>
          <button class="next-button flex-item" @click="next">next</button>
      </div>
  </div>

• css代码

  <!-- 引入组件库css -->
  <link rel="stylesheet" href="../css/mint-style.css">
  <style>
      html,body{
          width: 100%;
          height: 100%;
          margin: 0;
      }
      #app{
          width: 100%;
          height: 100%;
      }
      .swipe-wrapper{
          width: 100%;
          height: 300px;
      }
      .swip-item-1{
          background: red;
      }
      .swip-item-2{
          background: blue;
      }
      .swip-item-3{
          background: green;
      }
      .item{
          text-align: center;
          font-size: 40px;
          color: white;
      }
  
      .button-wrapper{
          display: flex;
          height: 100px;
      }
      .flex-item{
          flex: 1;
          display: inline-block;
          text-align: center;
          height: 100%;
          line-height: 100%;
          font-size: 40px;
      }
      .prev-button{
          background: darkorange;
      }
      .next-button{