父组件：

<template>
    <div id="animateList">
        <div id="box">
            <div id="con1" ref="con1" :class="{anim:animate==true}" @mouseenter="mEnter" @mouseleave="mLeave">
                <p v-for='item in List'>
                    <span><span style="color: #dd7679">{{item.name}}</span>于<span style="color: #00d1b2">{{item.time}}</span>登录</span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "animateList",
        props:{
            List: {
                type: Array,
                default: []
            },
        },
        data() {
            return {
                animate: false,
            }
        },
        mounted() {
            this.timer= setInterval(this.scroll,1000)
        },
        methods: {
            scroll() {
                let that = this;
                that.$refs.con1.style.marginTop = '-30px';
                that.animate = !that.animate;
                setTimeout(function () {
                    that.List.push(that.List[0]);
                    that.List.shift();
                    that.$refs.con1.style.marginTop = '0px';
                    that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
                }, 500)
            },
            mEnter() {
                clearInterval(this.timer)
            },
            mLeave() {
                this.timer = setInterval(this.scroll, 3000)
            },
        },
        beforeDestroy() {
            if (this.timer) {clearInterval(this.timer);}
        },
    }
</script>

<style scoped>
    #box{
        height: 300px;
        line-height: 30px;
        overflow: hidden;
        transition: all 0.5s;
        color: #ffffff;
    }
    .anim{
        transition: all 0.5s;
    }
    #con1 li{
        list-style: none;
        line-height: 30px;
        height: 30px;
    }
</style>

子组件引用：

<template>
    <div id="index">
    	<animateList :List="List"></animateList>
	</div>
</template>

<script>
import animateList from '@/components/AnimateList/animateList'//引入父组件路径
export default {
    data() {
        return {
            List:[
                {name:'用户1',time:'2021/01/12'},
                {name:'用户2',time:'2021/01/13'},
                {name:'用户3',time:'2021/01/22'},
                {name:'用户4',time:'2021/01/23'},
                {name:'用户5',time:'2021/02/12'},
                {name:'用户6',time:'2021/02/16'},
                {name:'用户7',time:'2021/02/22'},
                {name:'用户8',time:'2021/02/23'},
                {name:'用户9',time:'2021/03/03'},
                {name:'用户10',time:'2021/03/12'}
            ]
        };
    },
    components:{
        animateList
    }
}
</script>
<style scoped>
    #index{
    	background-color: #2f71c7;
    }
</style>

效果图展示：

uniapp插件市场地址：https://ext.dcloud.net.cn/plugin?id=4411
github地址：https://github.com/zsptsf/AnimateList
npm地址：https://www.npmjs.com/package/animatelist