vue2使用“vue-j-scroll”实现自动滚动

效果图

安装
npm install @david-j/vue-j-scroll --save-dev

在（main.js）进行注册，我是在全局注册的

import VueScroll from '@david-j/vue-j-scroll';
Vue.use(VueScroll)

使用（这里循环的数据和data的数据要一样的，list-style是写的样式高度，后面我会说我写这个踩到的坑）

<vue-j-scroll
      class="list-style"
      :data="tableData"
      :steep="0.5"
      scrollDirection="top"
      :isRoller="true"
      :rollerScrollDistance="50"
      ref="illiteracy"
    >
      <div
        v-for="(i, index) in tableData"
        :key="index"
        @click="clickNum(i)"
      >
        <p>{{ i.regionName }}</p>
        <p>{{ i.illiteracyMale }}</p>
        <p>{{ i.illiteracyFemale }}</p>
      </div>
    </vue-j-scroll>

对应的参数

• steep 滚动的速率， 数据类型：number 为正数即可
• scrollDirection 滚动的方向 ， 数据类型：string top ,bottom,left,right
• isRoller 是否可以使用滚轮滚动， 数据类型：boolean true,false
• rollerScrollDistance 滚轮滚动的速率， 数据类型：number 为正数即可（isRoller 必须为 true）
• data 接收异步数据， 数据类型： array 同步任务可不传

踩过的坑
list-style的样式一定要设置高度，(vue-j-scroll一定要设置高度)，外面包着vue-j-scroll的盒子也要设置高度

小伙伴可能会遇到，就是一开始数据比较多的时候，会开始滚动，但是在自动更换数据后，页面开始闪动的问题，只需要给vue-j-scroll加一个ref，比如我这上面加的ref是“illiteracy”，在切换数据的时候，加上this.$refs.illiteracy.stop()这句话，因为我是父传子，所以在监听数据变化的时候加的，如果你是通过方法发送ajax请求后接收的数据，放在后面是一样的