vue中，基于vue-seamless-scroll跑马灯的无缝滚动实例

参考：

​​​​​​07 - 单行停顿时间(singleHeight,waitTime) | vue-seamless-scroll

vue中，基于vue-seamless-scroll的无缝滚动实例 - 庞某人 - 博客园

1、安装vue-seamless-scroll

1	npm install vue-seamless-scroll --save

2.引入组件

import vueSeamlessScroll from 'vue-seamless-scroll/src'

components:{
  vueSeamlessScroll
},

3.使用组件   绑定数据 data  配置项classOption

<vue-seamless-scroll
        :data="dataArr"
        class="seamless-warp"
        :class-option="classOption"
    >
      <table cellspacing="0" cellpadding="0" class="tablekuang"
             v-for="(item, index) in dataArr"
             :key="index">
        <tr>
          <td class="tab_title1">{{item.inputTime}}
          </td>
          <td class="tab_title">留言人： {{ item.username | ellipsis}}</td>
          <td class="tab_title">联系电话：{{ item.usertelephone }}</td>
          <td class="tab_title_last">
            <el-checkbox-group v-model="item.evaluationType">
              <el-checkbox v-for="(i,index) in totalTypes"
                           :label="i.id" :value="i.id" :key="i.id" name="type"
                           onclick="return false">
                <span :class="i.classstyle">{{i.name}}</span>
              </el-checkbox>
            </el-checkbox-group>

            <!--已反馈图标-->
<!--            <div v-show="item.status"
                 style="position:absolute;top:0px;right:0px;background: url('static/img/dandan/yifankui.png') no-repeat;width: 60px;height: 47px;">
            </div>-->
          </td>
        </tr>
        <tr>
          <td colspan="4" style="color: #ffffff;font-size: 22px;padding-left: 15px;padding-right: 65px">
            {{item.content}}
          </td>
        </tr>
      </table>
    </vue-seamless-scroll>

4.配置项

computed: {
    classOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        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: 2000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },