使用vue-seamless-scroll实现自动轮播功能-附详解、源码

前言：在日常开发中，很多数据是用表格的形式展现的，但是在一些可视化大屏需要将表格自动轮播，这个时候可以用表格的自动轮播，也可以用栅格布局配合vue-seamless-scroll来实现更完美的自动轮播

1、安装vue-seamless-scroll

npm install vue-seamless-scroll --save

在你的项目中引入：

import vueSeamlessScroll from 'vue-seamless-scroll'

2、html代码：

注：listData是需要轮播的数据，后面会在data中定义，在这里我每个数据都用了tooltip包裹，因为有时候数据会很长导致错乱，但是不需要的话可以删掉

<div class="list-box">
      <el-row class="header-title" :gutter="20">
        <el-col :span="8">IP</el-col>
        <el-col :span="5">姓名</el-col>
        <el-col :span="5">开始时间</el-col>
      </el-row>//这是表头
      <el-scrollbar style="height: 255px">
        <vue-seamless-scroll
          :data="listData"
          class="seamless-warp"
          :class-option="classOption"
        >
          <el-row v-for="(item, index) in listData" :key="index">
            <el-col :span="8">
              <el-tooltip
                class="item"
                effect="dark"
                :content="String(item.ip)"
                placement="top"
              >
                <span>{
   
   { item.ip }}</span>
              </el-tooltip>
            </el-col>
            <el-col :span="5">
              <el-tooltip
                class="item"
                effect="dark"
                :content="String(item.name)"
                placement="top"
              >
                <span>{
   
   { item.name }}</span>
              </el-tooltip>
            </el-col>
            <el-col :span="5">
              <el-tooltip
                class="item"
                effect="dark"
                :content="String(item.time)"
                placement="top"
              >
                <span>{
   
   { item.time }}</span>
              </el-tooltip>
            </el-col>
          </el-row>
        </vue-seamless-scroll>
      </el-scrollbar>
    </div>

3、js代码：

export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      listData: [
        {
          ip: "127.0.0.1",
          name: "www",
          time: "2023.2.20",
        },
        {
          ip: "127.0.0.2",
          name: "www",
          time: "2023.2.20",
        },
        {
          ip: "127.0.0.3",
          name: "www",
          time: "2023.2.20",
        },
        {
          ip: "127.0.0.4",
          name: "www",
          time: "2023.2.20",
        },
        {
          ip: "127.0.0.5",
          name: "www",
          time: "2023.2.20",
        },
        {
          ip: "127.0.0.6",
          name: "www",
          time: "2023.2.20",
        },
        {
          ip: "127.0.0.7",
          name: "www",
          time: "2023.2.20",
        },
        {
          ip: "127.0.0.7",
          name: "www",
          time: "2023.2.20",
        },
      ],
    };
  },
  computed: {
    classOption() {//这里的计算属性需要绑定到上面的vue-seamless-scroll上
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: false, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
};

注：1、需要将引入进来的vueSeamlessScroll在compons中进行声明

        2、计算属性中的‘classOption’需要与class-option定义的值一致，如下图：

 

4、css代码：（可以直接复制粘贴使用，再修改相应的样式）

.list-box {
  width: 44%;
  height: auto;
  /*border: 1px solid red;*/
  position: relative;
  text-align: center;

  .header-title {
    position: relative;
    z-index: 999;
    top: 0;
    background-color: #3265bd !important;
  }

  .el-row {
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #0c65fc;
    margin: 0 !important;
  }

  .el-col {
    padding: 0 !important;
  }

  .el-row:nth-child(2n-1) {
    background: #0e2c75;
    /*border-bottom: 1px solid #0c65fc;*/
  }

  .el-col {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 12px;
  }

}

效果图：（会自动轮播的）