方式一
1.npm install vue-seamless-scroll --save 安装vue-seamless-scroll
2.在相应的组件中
import vueSeamlessScroll from 'vue-seamless-scroll'
components:{ vueSeamlessScroll },
3.
computed: { // 公告滚动自定义 defaultOption () { return { 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) } } },
4.
{ {text}}
comdetails:['aaaaaaaaaaaaaaaaaaaaaaa','bbbbbbbbbbbbbbb']
5.
.com-infor{ &.text{ padding: 10px 10px; height: 90px; overflow: hidden; text-align: justify; white-space: normal; } }
方式二
1.
{ {item.name}} /天 { {item.num}}
data中 carTrajectoryList:[{name:'出租车轨迹',num:'60G'},{name:'网约车轨迹',num:'1.6T'}, {name:'监控运营车',num:'102G'},{name:'商用车轨迹',num:'9.5G'}, {name:'大型车车轨迹',num:'600G'},{name:'车联网车轨迹',num:'50G'}, {name:'用户生成轨迹',num:''}],
guijiListTimer:null,
样式中 .list-move{ transition: all 1s; } .list-leave-active{ position:absolute; opacity: 0; }
.animate_list{ list-style: none; //margin: 15px 0; height: 250px; overflow: hidden; li{ margin: 26px 0; height: 30px; .gjName{ @include fontstyle($title-font-style,$dataNum-title-fontsize,$dataNum-enTitle--fontcolor); line-height: 30px; } .gjNum{ float: right; @include fontstyle($number-font-style,$date-fontsize-style,$dataNum-num-fontcolor); line-height: 30px; } .gjUnit{ float: right; @include fontstyle($title-font-style,$mostsmall-fontsize-style,$dataNum-enTitle--fontcolor); line-height:30px; } } }
2.mounted()
if(that.guijiListTimer!=null){ clearInterval(that.guijiListTimer); that.guijiListTimer=null; } that.guijiListTimer=setInterval(function(){ that.ulAnimation(); },3000);
3.methods中
ulAnimation(){ let that=this; let firstObj=that.carTrajectoryList[0]; that.carTrajectoryList.splice(0,1); setTimeout(function(){ that.carTrajectoryList.push(firstObj); },1500);
}
4
destroyed(){
if(this.guijiListTimer!=null){ clearInterval(this.guijiListTimer); this.guijiListTimer=null; }
}