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