使用vue-seamless-scroll插件实现数据无缝滚动

效果展示

vue2版本使用vue-seamless-scroll

1、安装

npm install vue-seamless-scroll --save
yarn add vue-seamless-scroll

2、注册组件

（全局注册组件）

// **main.js**
// 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>

3、使用组件

<vueScroll 
    :data="listData"
    :class-option="optionHover"
     class="warp"> 
     <ul class="item">
          <li v-for="(item, index) in listData" :key="index">
            <span class="title" v-text="item.title"></span>
            <span class="date" v-text="item.date"></span>
          </li>
      </ul>                     
  </vuescroll>
<script>
import vueScroll from 'vue-seamless-scroll'
export default {
  components: {
    vueScroll
  },
  data() {
    return {
    listData:[
       {
          'title': '无缝滚动第一行无缝滚动第一行',
          'date': '2017-12-16'
        }, {
          'title': '无缝滚动第二行无缝滚动第二行',
          'date': '2017-12-16'
        }, {
          'title': '无缝滚动第三行无缝滚动第三行',
          'date': '2017-12-16'
        }
      ],
    }
  },
  computed: {
    optionHover() {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 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>
<style lang="scss" scoped>
  .warp {
    height: 270px;
    width: 360px;
    margin: 0 auto;
    overflow: hidden;
    ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      li,
      a {
        display: block;
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        font-size: 15px;
      }
    }
  }
</style>