vue循环滚动vue-seamless-scroll

安装

npm||cnpm install vue-seamless-scroll --save
或
yarn add vue-seamless-scroll
或
<!-- https://cdn.jsdelivr.net/npm/vue-seamless-scroll@latest/dist/vue-seamless-scroll.min.js -->
<script src="vue-seamless-scroll.min.js"></script>

使用

注册组件

// 1.全局 install
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

// 或者你可以自己设置全局注册的组件名 默认注册的组件名是 vue-seamless-scroll
Vue.use(scroll,{componentName: 'scroll-seamless'})

// 2.单个.vue文件局部注册
<script>
  import vueSeamlessScroll from 'vue-seamless-scroll'
   export default {
      components: {
        vueSeamlessScroll
      }
   }
</script>

使用组件

<template>
	<vue-seamless-scroll :data="arr" class="seamless-warp" :class-option="classOption">
      <ul class="item">
        <template v-for="(item) in arr">
          <!-- 悬停提示 -->
          <el-tooltip :key="item.name" effect="dark" :content="item.name" placement="top">
            <li>{{ item.value }}</li>
          </el-tooltip>
        </template>
      </ul>
	</vue-seamless-scroll>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      arr: []
    }
  },
  computed: {
    classOption() {
      return {
        step: 2, // 数值越大速度滚动越快
        limitMoveNum: 100, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 0, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值 0 是无缝不停止的滚动)，direction 为 0|1 时生效
        singleWidth: 0, // 单步运动停止的宽度(默认值 0 是无缝不停止的滚动)，direction 为 2|3 时生效
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  created() {
    for (let i = 0; i < 100; i++) {
      this.arr.push({
        name: i + '名字',
        value: '10101010101'
      })
    }
  },
  methods: {
    ScrollEnd() {
      // 回调事件
      // console.log('ScrollEnd')
    }

  }
}
// 具体样式以及实现出来的结果不再赘述

字体颜色渐变可加样式

background-image:-webkit-linear-gradient(bottom,rgba(254, 254, 254, 1),rgba(254, 254, 254, 0));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

附加地址

1. github地址
2. 指南地址