手写轮播列表(最新) 轮播图 swiper

 el-row版本: 

<template>
  <div class="container-div" id="app">
    <div>
      <!--    头部开始-->
      <div class="top1">
        <div class="content">
          <div class="list">
            <el-row :gutter="20">
              <el-col :span="6">名称</el-col>
              <el-col :span="6">时间</el-col>
              <el-col :span="6">开展人数(人)</el-col>
              <el-col :span="6">参训率(%)</el-col>
            </el-row>

            <div class="list-relative">
              <div
                :class="activeIndex == 0 ? 'xx' : 'list-content'"
                :style="{top }"
                @mouseenter="Stop()"
                @mouseleave="Up()"
              >
                <div v-for="(item, index) in tableList" :key="index">
                  <el-row :gutter="20" :class="(index + 1) % 2 == 1 ? '' : ' active'">
                    <el-col :span="6" class="pl15" :title="item.address">
                      {{
                      item.address
                      }}
                    </el-col>
                    <el-col :span="7" class="textCenter">{{ item.date }}</el-col>
                    <el-col :span="6" class="textCenter">{{ item.name }}</el-col>
                    <el-col :span="5" class="textCenter">{{ item.address }}</el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--头部结束-->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableList: [],

      resData: [
        {
          date: "2016-05-02",
          name: "1",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "2",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "3",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "4",
          address: "上海市普陀区金沙江路 1516 弄"
        },
        {
          date: "2016-05-01",
          name: "5",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-01",
          name: "6",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-01",
          name: "3",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "4",
          address: "上海市普陀区金沙江路 1516 弄"
        },
        {
          date: "2016-05-01",
          name: "5",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-01",
          name: "6",
          address: "上海市普陀区金沙江路 1519 弄"
        }
      ],

      activeIndex: 0,
      intnum: null,
      listRowNum: 5 //滚动列表默认最多显示条数
    };
  },

  computed: {
    top() {
      if (this.tableList.length < this.listRowNum) {
        return "0vh";
      } else {
        return -this.activeIndex * 3.5 + "vh";
      }
    }
  },

  created() {
    this.tableList = this.resData.slice(0);
    console.log(this.tableList.length, "this.tableList.length");
    if (this.listRowNum < this.tableList.length) {
      this.ScrollUp();
    }
  },
  methods: {
    ScrollUp() {
      this.Stop();
      this.intnum = setInterval(_ => {
        this.activeIndex += 1;
        let Obj = [];
        Obj = this.tableList[this.activeIndex - 1];
        this.tableList.push(Obj);
        if (this.activeIndex > this.resData.length * 2) {
          this.activeIndex = 0;
          this.tableList = this.resData.slice(0);
        }
      }, 2500);
    },
    Stop() {
      clearInterval(this.intnum);
    },
    Up() {
      if (this.listRowNum < this.resData.length) {
        this.ScrollUp();
      }
    }
  }
};
</script>

<style>
.container-div {
  border: 1px solid red;
  padding: 20px;
}
.top1 {
  background: white;
  padding: 20px 20px 16px 20px;
  /* height: 240px; */
  border-radius: 6px;
  width: 1000px;
  height: 300px;
  border: 1px solid red;
}

.list {
  height: 20vh;
  border: 2px solid blue;
}
.el-row {
  height: 3.5vh;
  line-height: 3.5vh;
}
.list-relative {
  width: 100%;
  height: 16vh;
  border: 1px solid red;
  overflow: hidden;
  position: relative;
}

.list-content {
  width: 100%;
  position: absolute;
  transition: top 0.5s;
}

.xx {
  width: 100%;
  position: absolute;
}

.el-col {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

div版本:

<template>
  <div class="container-div" id="app">
    <div>
      <!--    头部开始-->
      <div class="top1">
        <div class="content">
          <div class="list">
            <div class="row">
              <div>名称</div>
              <div>时间</div>
              <div>开展人数(人)</div>
              <div>参训率(%)</div>
            </div>

            <div class="list-relative">
              <div
                :class="activeIndex == 0 ? 'xx' : 'list-content'"
                :style="{top }"
                @mouseenter="Stop()"
                @mouseleave="Up()"
              >
                <div v-for="(item, index) in tableList" :key="index">
                  <div :gutter="20" :class="(index + 1) % 2 == 1 ? '' : ' active'" class="row">
                    <div class="pl15" :title="item.address">
                      {{
                      item.address
                      }}
                    </div>
                    <div class="textCenter">{{ item.date }}</div>
                    <div class="textCenter">{{ item.name }}</div>
                    <div class="textCenter">{{ item.address }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--头部结束-->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableList: [],

      resData: [
        {
          date: "2016-05-02",
          name: "1",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "2",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "3",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "4",
          address: "上海市普陀区金沙江路 1516 弄"
        },
        {
          date: "2016-05-01",
          name: "5",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-01",
          name: "6",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-01",
          name: "3",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "4",
          address: "上海市普陀区金沙江路 1516 弄"
        },
        {
          date: "2016-05-01",
          name: "5",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-01",
          name: "6",
          address: "上海市普陀区金沙江路 1519 弄"
        }
      ],

      activeIndex: 0,
      intnum: null,
      listRowNum: 5 //滚动列表默认最多显示条数
    };
  },

  computed: {
    top() {
      if (this.tableList.length < this.listRowNum) {
        return "0vh";
      } else {
        return -this.activeIndex * 3.5 + "vh";
      }
    }
  },

  created() {
    this.tableList = this.resData.slice(0);
    console.log(this.tableList.length, "this.tableList.length");
    if (this.listRowNum < this.tableList.length) {
      this.ScrollUp();
    }
  },
  methods: {
    ScrollUp() {
      this.Stop();
      this.intnum = setInterval(_ => {
        this.activeIndex += 1;
        let Obj = [];
        Obj = this.tableList[this.activeIndex - 1];
        this.tableList.push(Obj);
        if (this.activeIndex > this.resData.length * 2) {
          this.activeIndex = 0;
          this.tableList = this.resData.slice(0);
        }
      }, 2500);
    },
    Stop() {
      clearInterval(this.intnum);
    },
    Up() {
      if (this.listRowNum < this.resData.length) {
        this.ScrollUp();
      }
    }
  }
};
</script>

<style>
.container-div {
  border: 1px solid red;
  padding: 20px;
}
.top1 {
  background: white;
  padding: 20px 20px 16px 20px;
  /* height: 240px; */
  border-radius: 6px;
  width: 1000px;
  height: 300px;
  border: 1px solid red;
}

.list {
  height: 20vh;
  border: 2px solid blue;
}
.row {
  height: 3.5vh;
  line-height: 3.5vh;
  display: flex;
  justify-content: space-between;
}
.list-relative {
  width: 100%;
  height: 16vh;
  border: 1px solid red;
  overflow: hidden;
  position: relative;
}

.list-content {
  width: 100%;
  position: absolute;
  transition: top 0.5s;
}

.xx {
  width: 100%;
  position: absolute;
}

.el-col {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>