在vue中手写一个文字的轮播功能

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

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

一、 不定高轮播

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

定高的情况下我选择的是使用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动画