vue-seamless-scroll 的使用

效果

配置项=>
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>