vue使用vue-seamless-scroll实现上下自动滚动

效果图：

vue使用vue-seamless-scroll实现上下自动滚动

一、使用：
1、安装vue-seamless-scroll

npm install vue-seamless-scroll --save

2、在组件引入vue-seamless-scroll

import vueSeamlessScroll from 'vue-seamless-scroll'

components: { // 组件
    vueSeamlessScroll
},

*在main.js文件里面引入使用：

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

3、示例使用
(1)、布局部分
template部分：

 

    

      
{
    {item.id}}
      
{
    {item.school}}
      
点歌量：{
    {item.numbers}}
      

    
 

style部分
注意：需要给父容器一个height、：data='Array’和overflow：hidden

.schoolRank
  height 5rem
  width 97%
  margin-left 1%
  margin-top .1rem
  border-radius 15px
  border solid #ccc 1px
  box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
  background-color #fff
  .seamless-warp
    width: 100%;
    height 5rem
    overflow: hidden;
    // background-color red
    .rank
      width 90%
      margin-left 5%
      line-height .8rem
      margin-top .3rem
      li
        height 1.6rem
        font-size 20px
        margin-left 10%
        margin-bottom 20px
        // background-color red
        .numbers
          font-size 16px
          color black
        .front
          float left
          width 10%
          line-height .8rem
          margin-left -10%
          // background-color skyblue

(2)、逻辑部分：

data () {
    return {
      CardPartsStatisticsList: [{
        id: '1',
        school: '大学1',
        numbers: '230'
      }, {
        id: '2',
        school: '大学2',
        numbers: '220'
      }, {
        id: '3',
        school: '大学3',
        numbers: '210'
      }, {
        id: '4',
        school: '大学4',
        numbers: '200'
      }, {
        id: '5',
        school: '大学5',
        numbers: '190'
      }, {
        id: '6',
        school: '大学6',
        numbers: '180'
      }, {
        id: '7',
        school: '大学7',
        numbers: '170'
      }, {
        id: '8',
        school: '大学8',
        numbers: '160'
      }, {
        id: '9',
        school: '大学9',
        numbers: '150'
      }
      ]
    }
  },
  
  computed: {
    classOption () {
      return {
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) 
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) 
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  }