1. 安装vue-seamless-scroll
npm install vue-seamless-scroll --save
2. 在main.js全局引入
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
3. 在需要的地方引入
html部分:
<div class="electricscrollbox">
<vue-seamless-scroll
:data="listData"
:class-option="optionHover"
class="seamless-warp"
>
<ul class="item">
<li v-for="item in listData" :key="item">
<span>更新:2022-01-12</span>
<span>监测到设备离线</span>
<span @click="goPoweralarm">处理</span>
</li>
</ul>
</vue-seamless-scroll>
</div>
css样式部分,高度样式需要根据自己项目自行调整:
.electricscrollbox {
margin-top: 10px;
background: #8a8ead47;
.seamless-warp {
height: 30px;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
ul li {
height: 30px;
line-height: 30px;
list-style-type: none;
display: flex;
justify-content: space-around;
}
}
数据部分:
listData: [{
'title': '无缝滚动第一行无缝滚动第一行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第二行无缝滚动第二行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第三行无缝滚动第三行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第四行无缝滚动第四行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第五行无缝滚动第五行',
'date': '2017-12-16'
}]
js参数配置部分:
computed: {
optionHover() {
return {
hoverStop: false, //是否悬停
waitTime: 2500, //单行停顿时间
singleHeight: 30,//单步运动停止的高度(默认值0是无缝不停止的滚动)很重要要跟li的高度一样
}
}
},
4.效果展示