vue有很多滚动插件，但是目前找不到通过修改数据实现滚动的插件，大部分的插件都是通过dom元素的滚动实现的，这种插件滚动起来更加平滑，但是有个问题：

如果要区别第一条数据，就需要通过对列表进行push操作了
注：单纯的滚动可以用vue-seamless-scroll插件

<template>

    <div class="box">

        <ul ref="container">

            <li v-for="(item,index) in list" :key="item.id"> {{ item.text }}</li>

        </ul>

    </div>

</template>

<script>

    export default {

        name: 'ScrollList',

        data() {

            return {

                list: [ 

                    {id: 1, text: '列表1'},

                    {id: 2, text: '列表2'},

                    {id: 3, text: '列表3'},

                    {id: 4, text: '列表4'},

                    {id: 5, text: '列表5'}

                ]

            }

        },

        mounted() {

            this.scrollList()

        },

        methods: {

            scrollList() {

                const oUl = this.$refs['container']

                const oli = document.getElementsByTagName('li')

                const maxL = oli[0].offsetHeight

                let timer = 0

                const moveLi = () => {

                    timer++

                    if (timer >= maxL) {

                        timer = 0

                        this.list.push(...this.list.splice(0, 1))

                    }

                    oUl.style.top = '-' + timer + 'px'

                }

                setInterval(moveLi, 30)

            }

        },

    }

</script>

<style lang="less" scoped>

    .box {

        width: 100%;

        height: 300px;

        overflow: hidden;

        ul {

            position: absolute;

            top: 0;

            left: 0;

            padding: 0;

            margin: 0;

            width: 100%;

            li {

                width: 100%;

                height: 30px;

                line-height: 30px;

                text-align: center;

                font-size: 16px;

                list-style: none;

            }

        }

    }

</style>