最近在中控项目中遇到一个问题，就是需要轮播显示数据，网上给的教程都是定高的，所以就自己写了一个，效果如下：

对于这种轮播的功能，其实应该根据是否定高去分为两种情况用不同的方案去处理。

一、 不定高轮播

      我在看了很多博客之后发现他们给的方案都是定高的，这种你可能一搜一大把，我就只分享别人没有说过或者不容易找到的情况吧。我暂且将轮播的部分称为轮播区域，将轮播区域之外的地方成为外部吧。

定高的情况下我选择的是使用vue中的:style动态改变轮播区域的transform属性，如果你需要上下滚动就调整translateY，如果需要左右滚动就调整translateX属性，然后在你从后台拉取数据之后设置一个定时器，每隔多久去改变多少的translateY(或translateX)的值,这一部分可以控制滚动的速度。代码如下：

<div ref="scroll" :style="pos">     <ul>         <li class="fcd7e" v-for="item in list" :key="item.index">             {{item}}         </li>     </ul> </div>  // js部分 export default {     data() {         return: {             list: ['周杰伦','蔡徐坤','李现','马蓉','马云','马化腾'],             height: 0, // 轮播区域的高度             yPos: 0,  // 轮播到了多少距离         }     },     computed: {         pos() {           return { transform: `translateY(${this.yPos}px` }; // 计算属性改变style         }     }，     mounted() {         this.initScroll()  // 通常不是在mounted中调用initScroll()这个方法，而是获取list后     },     methods: {         initScroll() {            this.$nextTick(() => {                 this.height = this.$refs.scroll.offsetHeight;                 setInterval(() => {                     if (this.yPos > -this.height / 2) {                         this.yPos = this.yPos - 1;                     } else {                     this.yPos = 0;                     }                 }, 50);            });         }     } }

      然后你需要调整一下外部样式，给其一个宽高，overflow设为hidden; 当然你可以将上面的代码微调一下，让其变成左右滑动，还可以改变速度，也可以添加鼠标移动到轮播上面时停止定时器，然后鼠标移出时打开定时器，这样做出一个鼠标移到上面停止的效果。

二、 定高轮播

由于不定高轮播中，我们是需要一直改变transform的值，性能会不好。比如在我们公司的，为了图便宜买了一个配置很差的电视机，就感觉像滚不动一样。所以在定高轮播中，我们需要其他方案。这里我研究了三套方案，但其他作者可能都写过了，所以就简单记录一下吧。

      1. 使用<marquee>标签，性能很好，但会存在滚了之后存在大量留白的情况，所以不推荐。

      2.使用css原生动画

      3.使用vue动画