滚动数据展示

<template>
  <div id="box">
    <div
      id="con1"
      ref="con1"
      :class="{ anim: animate == true }"
      @mouseenter="mEnter"
      @mouseleave="mLeave"
    >
      <!-- <p v-for="item in items" :key="item.name">中奖人的名字是--{{ item.name }}</p> -->
      <div v-if="from === 'und'">
        <div
          v-for="(item, index) in items"
          :key="index"
          class="data-item"
          :class="item.active % 2 === 0 ? 'bg-item' : ''"
        >
          <div>{{ item.name }}</div>
          <div>{{ item.detail }}</div>
          <div>{{ item.date }}</div>
        </div>
      </div>
      <div v-else-if="from === 'build'">
        <div
          v-for="(item, index) in items"
          :key="index"
          class="data-item"
          :class="item.active % 2 === 0 ? 'bg-item' : ''"
        >
          <div>{{ item.time }}</div>
          <div>{{ item.id }}</div>
          <div>{{ item.from }}</div>
          <div>{{ item.type }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script> 
export default {
  props: {
    from: {
      type: String,
    },
  },
  data() {
    return {
      animate: false,
      undergroundDataList: [
        //消息列表对应的数组
        { name: "燃气", detail: "其他", date: "2021-9-21" },
        { name: "供水", detail: "流量异常", date: "2021-9-23" },
        { name: "电力", detail: "其他", date: "2021-9-25" },
        { name: "水管", detail: "压力异常", date: "2021-9-30" },
        { name: "燃气", detail: "其他", date: "2021-9-21" },
        { name: "供水", detail: "流量异常", date: "2021-9-23" },
        { name: "电力", detail: "其他", date: "2021-9-25" },
        { name: "水管", detail: "压力异常", date: "2021-9-30" },
      ],
      crossDoorPeopleList: [
        { time: "9:25", id: "工号003", from: "从东南门", type: "进入" },
        { time: "9:35", id: "工号025", from: "从东门", type: "进入" },
        { time: "9:38", id: "工号012", from: "从南门", type: "外出" },
        { time: "9:48", id: "工号054", from: "从西南门", type: "进入" },
        { time: "9:55", id: "工号083", from: "从东南门", type: "外出" },
        { time: "9:58", id: "工号078", from: "从北门", type: "外出" },
      ],
    };
  },
  created() {
    if (this.from === "und") {
      this.items = this.undergroundDataList;
    } else if ((this.from = "build")) {
      this.items = this.crossDoorPeopleList;
    }
    this.items.forEach((item, index) => {
      if (index % 2 === 0) {
        item.active = true;
      } else {
        item.active = false;
      }
    });
  },
  mounted() {
    this.timer1 = setInterval(this.scroll, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer1);
  },
  methods: {
    scroll() {
      let con1 = this.$refs.con1;
      con1.style.marginTop = "-35px";
      this.animate = !this.animate;
      var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
      setTimeout(function () {
        that.items.push(that.items[0]);
        that.items.shift();
        con1.style.marginTop = "0px";
        that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
      }, 500);
    },
    mEnter() {
      clearInterval(this.timer1);
    },
    mLeave() {
      this.timer1 = setInterval(this.scroll, 1000);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}
#box {
  width: 100%;
  /* height: 320px; */
  line-height: 35px;
  overflow: hidden;
  transition: all 0.5s;
  /* background-color: pink; */
}
.anim {
  transition: all 0.5s;
}
#con1 li {
  list-style: none;
  line-height: 35px;
  height: 35px;
}

.data-item {
  display: flex;
  justify-content: space-between;
  /* color: rgba(255, 255, 255, 0.6); */
  color: #fff;
  // padding: 0 21px;
  >div{
    display: flex;
    justify-content: center;
    flex: 1;
  }
}
.bg-item {
  background-color: rgba(0, 131, 192, 0.26);
  /* opacity: 0.26; */
}
</style>