vue 文字滚动效果插件

vue 文字滚动插件 备注：vueSeamlessScroll，不滚动的话，在这个组件第一层加行高

1）插件依赖：　 npm install vue-seamless-scroll --save

2）插件引入：form后面是插件的地址

<script>
  import vueSeamlessScroll from vue-seamless-scroll
  export default {
           
    
    components: {
           
     
         vueSeamlessScroll 
    },
  },
  data() {
           
    
    return {
           
    
      // 实时动态文字滚动
      timeList: [],
      classOption: {
           
    
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 10, // 开始无缝滚动的数据量 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)
      }
    }
  },</script>

3）直接使用：

<vueSeamlessScroll :data="timeList" class="scroll" :class-option="classOption">
 <ul id="list">
  <li v-for="item in timeList">
 <span class="time">{
         
  { item.time }}</span><a href="#">{
         
  { item.name }}</a>
  </li>
 </ul>
 </vueSeamlessScroll>

4）css样式

.scroll {
		height: 100%;
		overflow: hidden;
		padding: 0 1rem;
		box-sizing: border-box;
	}

	.scroll li {
		width: 100%;
		overflow: hidden;
		display: block;
	}

	.scroll li a {
		font-size: .8vw;
		color: #e62a4b;
		height: 2.6vh;
		line-height: 2.6vh;
		text-decoration: none;
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		width: calc(100% - 8vw);
		white-space: nowrap;
		vertical-align: middle;
	}

	.scroll li a:hover {
		text-decoration: underline;
	}

	.scroll li .time {
		font-size: .8vw;
		display: inline-block;
		width: 8vw;
		vertical-align: middle;
		color: #9599a0 !important;
		height: 2.6vh;
		line-height: 2.6vh;
	}