vue transform 实现无缝滚动以及轮播效果

<template>
  <div class="list" id="list">
    <div class="cc rowup">
    </div>
  </div>
</template>
<script>

export default {
  components: {},
  data () {
    return {
      infinite: true, // 是否无缝滚动，无缝滚动需要容器一样高，否则重置滚动不准
      easing: 'linear',
      modeuleHeight: 'auto',  // 固定高度 ，改变 easing 为 ease ，就是轮播效果
      type: 'css', // js 方式运行动画,还是 css，传相应的参数（js/css）
      jsAnimate: '',
      box: '',
      keyFrames: [],
      speed: 100  // 1 秒 滚动 多少 px
    };
  },
  created () { },
  mounted () {
　　// 实现滚动的单击暂停双击继续滚动
　　// 双击的方法，按照自己系统的监听方式进行触发
    $('.list').on('doubleTap', function () {
      console.log('您双击了~')
      if (self.type == 'js') {
        self.jsAnimate.play() // js 方式设置运行
      } else {
        $('.list .rowup').css('animation-play-state', 'running')  // css 方式设置运行
      }
    })
　　// 单击的方法，按照自己系统的监听方式进行触发
    $('.list').on('singleTap', function () {
      console.log('您单击了~')
      if (self.type == 'js') {
        self.jsAnimate.pause()  // js 方式设置暂停
      } else {
        $('.list .rowup').css('animation-play-state', 'paused') // css 方式设置暂停
      }
    })

    this.init()
  },
  methods: {
    init () {
      let data = '塞下秋来风景异，衡阳雁去无留意。四面边声连角起，千嶂里，长烟落日孤城闭。浊酒一杯家万里，燕然未勒归无计。' +
        // '羌管悠悠霜满地，人不寐，将军白发征夫泪。塞下秋来风景异，衡阳雁去无留意。四面边声连角起，千嶂里，长烟落日孤城闭。浊酒一杯家万里，燕然未勒归无计。' +
        // '羌管悠悠霜满地，人不寐，将军白发征夫泪。塞下秋来风景异，衡阳雁去无留意。四面边声连角起，千嶂里，长烟落日孤城闭。浊酒一杯家万里，燕然未勒归无计。' +
        // '羌管悠悠霜满地，人不寐，将军白发征夫泪。塞下秋来风景异，衡阳雁去无留意。四面边声连角起，千嶂里，长烟落日孤城闭。浊酒一杯家万里，燕然未勒归无计。' +
        // '羌管悠悠霜满地，人不寐，将军白发征夫泪。塞下秋来风景异，衡阳雁去无留意。四面边声连角起，千嶂里，长烟落日孤城闭。浊酒一杯家万里，燕然未勒归无计。' +
        // '羌管悠悠霜满地，人不寐，将军白发征夫泪。塞下秋来风景异，衡阳雁去无留意。四面边声连角起，千嶂里，长烟落日孤城闭。浊酒一杯家万里，燕然未勒归无计。' +
        // '羌管悠悠霜满地，人不寐，将军白发征夫泪。塞下秋来风景异，衡阳雁去无留意。四面边声连角起，千嶂里，长烟落日孤城闭。浊酒一杯家万里，燕然未勒归无计。' +
        // '羌管悠悠霜满地，人不寐，将军白发征夫泪。塞下秋来风景异，衡阳雁去无留意。四面边声连角起，千嶂里，长烟落日孤城闭。浊酒一杯家万里，燕然未勒归无计。' +
        // '羌管悠悠霜满地，人不寐，将军白发征夫泪。塞下秋来风景异，衡阳雁去无留意。四面边声连角起，千嶂里，长烟落日孤城闭。浊酒一杯家万里，燕然未勒归无计。' +
        // '羌管悠悠霜满地，人不寐，将军白发征夫泪。塞下秋来风景异，衡阳雁去无留意。四面边声连角起，千嶂里，长烟落日孤城闭。浊酒一杯家万里，燕然未勒归无计。' +
        // '羌管悠悠霜满地，人不寐，将军白发征夫泪。塞下秋来风景异，衡阳雁去无留意。四面边声连角起，千嶂里，长烟落日孤城闭。浊酒一杯家万里，燕然未勒归无计。' +
        '羌管悠悠霜满地，人不寐，将军白发征夫泪。羌管悠悠霜满地，人不寐，将军白发征夫泪。塞下秋来风景异，衡阳雁去无留意。四面边声连角起，千嶂里，长烟落日孤城闭。浊酒一杯家万里，燕然未勒归无计。', //样例数据
        data_len = data.length,
        len = parseInt(Math.random() * 6) + 9, // 数据的长度
        html = '<div class="ss">';

      len = 20

      for (let i = 0; i < len; i++) {
        let start = parseInt(Math.random() * (data_len - 20)),
          s = parseInt(Math.random() * data_len);
          if (this.infinite) {
            start = 0
            s = 15
          }
        html += '<div class="item" style="background: red;height: ' + this.modeuleHeight + ';">' + i + '- ' + data.substr(start, s) + '</div>';
      }
      html += '</div>';
      document.querySelector('.list .cc').innerHTML = html;

      const containerHeight = document.querySelector('.list').offsetHeight; // 滚动容器高度

      //  获取单个模块高度
      let oneHeight = document.querySelector('.list .ss .item').offsetHeight

      // 考虑高度不够的时候，不需要滚动，还有时间得改，要不速度就变了，相当于按照一个速度滚
      if (len * oneHeight <= containerHeight) {
        return
      }
      document.querySelector('.list .cc').innerHTML = html + html; // 复制一份数据
      if (this.type == 'js') {
        this.addKeyFramesJs(len, oneHeight)
      } else {
        this.addKeyFramesCss(len, oneHeight)
      }
    },
    addKeyFramesCss (count, oneHeight) {
      let style = document.createElement('style');
      style.type = 'text/css';
      // 循环，组织关键帧数据
      let keyFrames = '@keyframes rowup {'
      for (let i = 0; i <= count; i++) {
        keyFrames += ((100 / count) * i).toString() + '% {\
            -webkit-transform: translate3d(0, -'+ (i * oneHeight).toString() + 'px, 0);\
            transform: translate3d(0, -' + (i * oneHeight).toString() + 'px, 0);\
        }'
      }
      keyFrames += '}';

      // 初始化速度，根据速度算出滚动时间
      let scrollTime = count * oneHeight / this.speed
      style.innerHTML = keyFrames
      document.getElementsByTagName('head')[0].appendChild(style);
      $('.list .rowup').css('animation', scrollTime + 's rowup ' + this.easing + ' infinite normal')
    },
    addKeyFramesJs (count, oneHeight) {
      // 循环，组织关键帧数据
      for (let i = 0; i <= count; i++) {
        this.keyFrames.push({
          transform: 'translate3d(0, -' + i * oneHeight + 'px, 0)', easing: this.easing
        })
      }

      // 初始化速度，根据速度算出滚动时间
      let scrollTime = count * oneHeight / this.speed
      this.jsAnimate = this.box.animate(
        this.keyFrames,
        {
          duration: scrollTime * 1000,  //  动画时长  (单位毫秒)
          iterations: Infinity  //  重复次数  （无限循环：Infinity）
        }
      );
    }
  }
};
</script>

<style scoped>
.list {
  width: 500px;
  border: 1px solid #999;
  margin: 0px auto;
  position: relative;
  height: 600px;
  overflow: hidden;
  font-size: 25px;
  font-family: "Microsoft Yahei";
}
</style>