Vue实现列表跑马灯效果

Fawziya ·

更新时间:2024-09-20

· 1646 次阅读

本文实例为大家分享了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 列表跑马灯

1024 个赞