Vue实现简单列表无限循环滚动(鼠标悬停)

父组件:

<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

猜你喜欢

转载自blog.csdn.net/qq_42783654/article/details/114694520