vue 实现新闻滚动效果，无缝跑马灯，鼠标悬停暂停，离开继续滚动效果

方法一，有滚动bug，可以使用方法二

.mar_item{
   	white-space: nowrap;
    animation: 10s wordsLoop linear infinite normal; 
}
@keyframes wordsLoop {
    0% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}

<template>
    <div>
        <div class="competition-dynamics-warp-box" ref="wrapper">
            <div class="marquee-box" ref="marquee" @mouseover="mouseover" @mouseout="mouseout">
                <div class="marquee-item" v-for="(item, index) in dataList" :key="index">
                    <div class="mar_item">
                        <span class="mar_conter text-overflow">{{ index }}.《湖南日报》报道土流集团：土地流转 “转”出乡村振兴新活力</span>
                        <span class="mar_data">2022-03-09</span>
                    </div>
                </div>
                <!-- 复制一份滚动内容，用于实现无缝对接-->
                <div class="marquee-item" v-for="(item, index) in dataList" :key="index + 100">
                    <div class="mar_item">
                        <span class="mar_conter text-overflow">{{ index }}.《湖南日报》报道土流集团：土地流转 “转”出乡村振兴新活力</span>
                        <span class="mar_data">2022-03-09</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "marquee",
    data() {
        return {
            dataList: [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }],
            timer: null,
            box: "",
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        //元素超过4个之后才开始新建定时器实现滚动
        init() {
            if (this.dataList.length > 4) {
                this.box = this.$refs.wrapper;
                this.timer = setInterval(() => {
                    this.move();
                }, 10);
            }
        },
        // 跑马灯工作
        move() {
            let curLeft = this.box.scrollLeft;
            //父盒子总宽度除以2 (20是我这边盒子之间的右边距)
            let scrollWidth = this.$refs.marquee.scrollWidth / 2 + 20;
            this.box.scrollLeft = curLeft + 1;
            if (curLeft > scrollWidth) {
                this.box.scrollLeft = 0;
            }
        },
        //鼠标悬停
        mouseover() {
            clearInterval(this.timer);
            this.timer = null;
        },
        //鼠标离开，继续滚动
        mouseout() {
            this.init();
        },
    },
    //销毁定时器
    beforeDestroy() {
        clearInterval(this.timer);
        this.timer = null;
    },
};
</script>
<style lang='less' scoped>
.competition-dynamics-warp-box {
    height: 24px;
    overflow: hidden;
    position: relative;

    .marquee-box {
        display: flex;
        .marquee-item {
            margin-right: 20px;
        }
        .mar_item {
            float: left;
            display: flex;
            justify-content: space-around;
            position: relative;
            width: 338px;
            line-height: 24px;
            padding-left: 10px;
            margin: 0 20px 0 0;
            font-size: 14px;
        }
        .mar_item:hover .mar_conter {
            color: #39A85B;
            cursor: pointer;
        }
        .mar_conter {
            width: 74%;
            height: 100%;
            color: #262626;
        }
        .mar_data {
            width: 26%;
            height: 100%;
            text-align: right;
            color: #999999;
            padding-left: 10px;
        }
    }
}
</style>

方法二，使用vueSeamlessScroll 插件实现滚动，简单方便

安装vueSeamlessScroll

npm install vue-seamless-scroll --save

main.js 全局注册

import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

模块里面局部注册

import vueSeamless from 'vue-seamless-scroll'
   export default {
      components: {
        vueSeamless
      }
   }

direction: 2 这个数字是改变左右滚动方法的，step: 0.8，滚动速度，具体可以参考官网文档：
https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/

<template>
    <div>
        <div class="competition-dynamics-warp-box" ref="wrapper">
            <vue-seamless-scroll :data="noticeList" class="warp" :class-option="classOption">
                <div class="marquee-box">
                    <div class="marquee-item" v-for="(item, index) in noticeList" :key="index">
                        <div class="mar_item" @click="routerUrlClick('policyrdetails', {ID: item.id,IDrouter:8})">
                            <span class="mar_conter text-overflow">{{item.bt}}</span>
                            <span class="mar_data">{{item.createTime}}</span>
                        </div>
                    </div>
                </div>
            </vue-seamless-scroll>
        </div>
    </div>
</template>

<script>
import { policyDataList } from '../../api/news'
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
    components: {
        // eslint-disable-next-line vue/no-unused-components
        policyDataList, vueSeamlessScroll 
    },
    name: "marquee",
    data() {
        return {
            classOption: {
                limitMoveNum: 2,
                direction: 2,
                step: 0.8
            },
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                lx: 1,
                isshow: 1
            },
            noticeList: [],
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        routerUrlClick(url, params) {
            let path = params != '' ? { name: url, params: params } : { name: url }
            this.$router.push(path)
        },
        init() {
            policyDataList(this.queryParams).then((res) => {
                this.noticeList = res.data.rows
            })
        },
        
    },
   
};
</script>
<style lang='less' scoped>
.competition-dynamics-warp-box {
    height: 24px;
    overflow: hidden;
    position: relative;

    .marquee-box {
        display: flex;
        .marquee-item {
            margin-right: 20px;
        }
        .mar_item {
            float: left;
            display: flex;
            justify-content: space-around;
            position: relative;
            width: 338px;
            line-height: 24px;
            padding-left: 10px;
            margin: 0 20px 0 0;
            font-size: 14px;
            cursor: pointer;
        }
        .mar_item:hover .mar_conter,
        .mar_item:hover .mar_data {
            color: #39A85B;
        }
       
        .mar_conter {
            width: 74%;
            height: 24px;
            line-height: 24px;
            color: #262626;
        }
        .mar_data {
            width: 26%;
            height: 24px;
            line-height: 24px;
            text-align: right;
            color: #999999;
            padding-left: 10px;
        }
    }
}
</style>

如果想学全栈开发，从写接口到，前端实现调接口，一整套流程，可以进群获取视频资料学习！

Java全栈交流①群要是满了可以加2群 1135453115， ②群 821596752

最后

以上就是耍酷毛豆为你收集整理的vue 实现新闻滚动效果，无缝跑马灯，鼠标悬停暂停，离开继续滚动效果的全部内容，希望文章能够帮你解决vue 实现新闻滚动效果，无缝跑马灯，鼠标悬停暂停，离开继续滚动效果所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。