vue2 /vue3，vue3-seamless-scroll实现新闻滚动效果，无缝跑马灯，鼠标悬停暂停，离开继续滚动效果

方法一，有滚动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>

方法三，vue3中使用vue3-seamless-scroll

区别：安装，注册不一样，vue2使用:data=“listData”，vue3使用:list=“listData”

npm ，yarn

npm install vue3-seamless-scroll --save

yarn add vue3-seamless-scroll

main.js 全局注册

import { createApp } from 'vue';
import App from './App.vue';
import vue3SeamlessScroll from "vue3-seamless-scroll";
const app = createApp(App);
app.use(vue3SeamlessScroll);
app.mount('#app');

模块里面局部注册

import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
   export default {
      components: {
        Vue3SeamlessScroll 
      }
   }

单个vue局部注册

<script>
  import { defineComponent } from "vue";
  import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
   export default defineComponent({
      components: {
        Vue3SeamlessScroll
      }
   })
</script>

全部代码vue3写法

:hover=“true” 实现鼠标悬停停止
:step=“0.3” 滚动速度

classOption: {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            },

<template>
  <vue3-seamless-scroll :list="listData" class="seamless_scroll" :hover="true" :step="0.3">
    <div class="seamless_scroll_item " v-for="(item, index) in listData" :key="index">
      <span>{{item.title}}</span>
      <span>{{item.date}}</span>
    </div>
  </vue3-seamless-scroll>
</template>
<script>
import { defineComponent, ref,reactive } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
 
export default defineComponent({
  name: "App",
  components: {
    Vue3SeamlessScroll
  },
  setup() {
    const listData= ref([
      {
        title: "Vue3.0 无缝滚动组件展示数据第1条",
        date: '2023-12-06',
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第2条",
        date: '2023-12-06',
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第3条",
        date:'2023-12-06',
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第4条",
        date: '2023-12-06',
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第5条",
        date: '2023-12-06',
      },
      {
        title: "Vue3.0 无缝滚动组件展示数据第6条",
        date: '2023-12-06',
      }
    ]);
    return { listData };
  },
});
</script>
 
<style>
.seamless_scroll{
  height: 300px;
  width: 400px;
  overflow: hidden;
}
 
.seamless_scroll .seamless_scroll_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
}
</style>

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

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