vue中怎么做的无缝滚动?详细些,带代码

发布网友 发布时间：2022-04-23 07:34

我来回答

共1个回答

热心网友 时间：2022-04-26 14:38

vue中的无缝滚动效果图：

三人行慕课

vue中的无缝滚动代码：

   

<template>    <div class='scroll'>         <ul :class='{animateTop}'>            <li                 v-for='(item,index) in scrollList'            >                {{item}}            </li>        </ul>             </div></template><script type="text/javascript">export default {    data () {        return {            animateTop:false,            scrollList:[                "妻子起步连撞5车",                "梅西点球扳平比分",                "阿迪商标被判无效",                "林志玲婚后首亮相",                "詹保罗AC米兰主帅",                "来自三人行慕课"            ]        }    },    methods:{        scrollSlide(){            this.animateTop = true;            setTimeout(()=>{ this.scrollList.push(this.scrollList[0]);this.scrollList.shift();   this.animateTop = false;             },500)         }    },    mounted(){        setInterval(this.scrollSlide,2000)    }}</script><style scoped>.animateTop{    transition: all .3s;    margin-top:-25px;}.scroll{    height: 50px;    width:100%;    background: #ccc;    overflow: hidden;    line-height: 25px;    font-size:16px;}</style>