Vue如何实现列表跑马灯效果

这篇文章主要介绍了Vue如何实现列表跑马灯效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue如何实现列表跑马灯效果文章都会有所收获，下面我们一起来看看吧。

Vue文件中：

<ul class="GZDT_list clearfix active" @mouseover="stopScroll" @mouseout="startScroll">    <li v-for ="item in gzdtList" >        <a :href="item.url" rel="external nofollow"  target="_blank" :title="item.title" >            <span class="GZDTtitle">                {{item.title | ellipsis}}            </span>        </a>        <span class="right date">{{item.date}}</span>    </li></ul>

js：

<script>    export default{    data:function(){        return {            timeId:null,            // 跑马灯            animate:false,        };    },    filters: {},    methods:{        // 跑马灯        scroll(){            this.animate =true;// 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true            setTimeout(()=>{    //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多                this.TZGGList.push(this.TZGGList[0]); // 将数组的第一个元素添加到数组的                this.TZGGList.shift(); //删除数组的第一个元素                this.animate = false // margin-top 为0 的时候取消过渡动画，实现无缝滚动              }, 1000)        },                //鼠标悬停，停止滚动        stopScroll () {            var target = this.$refs.con1;            clearInterval(this.timeId)        },                //鼠标移开 ，接着滚动        startScroll () {            var target = this.$refs.con1;            this.timeId = setInterval(this.scroll,1500);  // 设置滑动速度        },    },    mounted: function() {        this.init();        this.timeId=setInterval(this.scroll,1500);    },}</script>

css：

<style>    #box{        height: 238px;        overflow: hidden;        border: 1px solid #ffffff;        margin-top: 0px;    }     .anim{        transition: all 2s;    }        #con1 li{        list-style: none;        line-height: 35px;        height: 35px;    }</style>

运行过程中发现走马灯title可以滚动改变但是对应的span标签的内容不变，可能是因为浏览器版本过高，可更换浏览器或降低浏览器版本试试

关于“Vue如何实现列表跑马灯效果”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue如何实现列表跑马灯效果”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。