效果
配置项=>
step: 0.8, //数值越大速度滚动越快
limitMoveNum: 8, //开始无缝滚动的数据量 //this.fourDatata.length
hoverStext: false, //是否开启鼠标悬停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)
小坑=>
会出现切断的现象 加上line-height
调整一下就可以了
<template>
<div>
<h1 style="margin-text: 20px;">vue-seamless-scroll 文字轮播效果</h1>
<vue-seamless-scroll :data="list" class="seamless-warp" :class="classOption">
<ul class="item">
<li v-for="(item,index) in list">
<span class="text" v-text="item.text" :class="styleObject[index]"></span>
<span class="date" v-text="item.date" :class="styleObject[index]"></span>
</li>
</ul>
</vue-seamless-scroll>
</div>
</template>
<script>
export default {
data() {
return {
date: new Date(),
list: [
{
text: '测试无缝滚动第一行',
date: '2020-12-20'
},
{
text: '测试无缝滚动第二行',
date: '2020-12-20'
},
{
text: '测试无缝滚动第三行',
date: '2020-12-20'
},
{
text: '测试无缝滚动第四行',
date: '2020-12-20'
},
{
text: '测试无缝滚动第五行',
date: '2020-12-20'
},
{
text: '测试无缝滚动第六行',
date: '2020-12-20'
},
],
styleObject:[
"color1","color2","color3","color4","color5"
]
};
},
computed: {
// classOption() {
// //配置项
// return {
// step: 0.8, //数值越大速度滚动越快
// limitMoveNum: 8, //开始无缝滚动的数据量 //this.fourDatata.length
// hoverStext: false, //是否开启鼠标悬停stext
// direction: 1, // 0向下 1向上 2向左 3向右
// openWatch: true, //开启数据实时监控刷新dom
// singleHeight: 0, //单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
// singleWidth: 0, //单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
// waitTime: 1000 //单步运动停止的时间(默认值1000ms)
// };
// }
}
},
};
</script>
<style>
.seamless-warp {
margin-top: 50px;
height: 229px;
overflow: hidden;
}
.item {
margin: 0 auto;
line-height: 50px; /*解决文字断点的问题*/
}
.date{
margin-left: 40px;
}
li{
color: aqua;
}
.color1{
color: violet;
}
.color2{
color: aqua;
}
.color3{
color: brown;
}
.color4{
color: violet;
}
.color5{
color: yellowgreen;
}
</style>