vue汇率轮播展示 vue-seamless-scroll

• 安装

install vue-seamless-scroll --save  

• 引入，main.js中

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

• 页面,样式自定义

<vue-seamless-scroll :data="list" :class-option="classOption" >
            <ul>
              <li v-for="(item,index) in list" :key="index">
                <span >{{item.name}}</span>
              </li>
            </ul>
 </vue-seamless-scroll>

computed: {
    classOption() {
      return {
        step: 0.3, //数值越大速度滚动越快
        limitMoveNum: 5, //开始无缝滚动的数据量  //this.list.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)
      };
    },
  }

• 效果

  
  轮播.gif