vue实现列表自动滚动

一.先下载插件

npm install vue-seamless-scroll --save

调用页面代码

<template>
  <div>
    <div class="wrap">
      列表滚动
      <div class="box">
        <vue-seamless-scroll :data="listData" :class-option="optionHover" class="seamless-warp">
        <ul class="item">
            <li v-for="(item,i) in listData" :key="i">
                <span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span>
            </li>
        </ul>
    </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
components: {
    vueSeamlessScroll
  },
  data () {
    return {
      listData: [
        {
          title: '根据一些用户的要求,支持 Ctrl+V 作为粘贴为纯文本的激活快捷方式',
          date: '1'
        },
        {
          title: '根据一些用户的要求,支持 Ctrl+V 作为粘贴为纯文本的激活快捷方式',
          date: '2'
        },
        {
          title: '根据一些用户的要求,支持 Ctrl+V 作为粘贴为纯文本的激活快捷方式',
          date: '3'
        },
        {
          title: '根据一些用户的要求,支持 Ctrl+V 作为粘贴为纯文本的激活快捷方式',
          date: '4'
        },
        {
          title: '根据一些用户的要求,支持 Ctrl+V 作为粘贴为纯文本的激活快捷方式',
          date: '5'
        },
        {
          title: '根据一些用户的要求,支持 Ctrl+V 作为粘贴为纯文本的激活快捷方式',
          date: '6'
        },
        {
          title: '根据一些用户的要求,支持 Ctrl+V 作为粘贴为纯文本的激活快捷方式',
          date: '7'
        },
        {
          title: '根据一些用户的要求,支持 Ctrl+V 作为粘贴为纯文本的激活快捷方式',
          date: '8'
        },
        {
          title: '根据一些用户的要求,支持 Ctrl+V 作为粘贴为纯文本的激活快捷方式',
          date: '9'
        },
        {
          title: '根据一些用户的要求,支持 Ctrl+V 作为粘贴为纯文本的激活快捷方式',
          date: '10'
        },
        {
          title: '根据一些用户的要求,支持 Ctrl+V 作为粘贴为纯文本的激活快捷方式',
          date: '11'
        }
      ]
    }
  },
  computed: {
    optionHover () {
      return {
        step: 0.15, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 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>
.wrap{
  margin-top: 400px;
  border: 1px solid red;
}
.box{
  height: 400px;
  overflow: hidden;
}
</style>

 效果图：

 直接粘贴代码即可使用。