前端列表可滚动，可轮播

前端列表可滚动，可轮播

<ul
 class="scroll-list"
   ref="scroll_List"
   @mouseenter="cancelScroll()"
   @mouseleave="autoScroll()"
 >
   <li
     class="list-item"
     v-for="(item,index) in tableData3"
     :class="[{'bor_1':item.level=='紧急'},{'bor_2':item.level=='重要'},{'bor_3':item.level=='一般'}]"
     :key="index"
   >
     <span class="title">{{ item.level != '一般'?item.state:"" }}</span>
     <span class="date">{{item.dateTime}}</span>

     <span class="content" :title="item.content">{{item.content}}</span>
     <input type="checkbox" v-model="" :value="item.content" class="check-box" />
   </li>
 </ul>

//自动滚动
autoScroll() {
  const divData = this.$refs.scroll_List3;
  // 拿到表格中承载数据的div元素
  divData.scrollTop += 1;
    if (
      Math.round(divData.clientHeight + divData.scrollTop) + 1 >=
      divData.scrollHeight
    ) {
      // 重置table距离顶部距离
      divData.scrollTop = 0;
    }
    this.scrolltimer3 = window.requestAnimationFrame(
      this.autoScroll.bind(this)
    );
},
//停止滚动
cancelScroll() {
  window.cancelAnimationFrame(this.scrolltimer3)
},

.scroll-list {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
  height: calc(98% - 260px);
  .list-item {
    padding: 0 10px;
    margin-bottom: 10px;
    height: 60px;
    font-size: 13px;
    color: #606266;
    position: relative;
    display: flex;
    align-items: center;
    background-color: #e1e1e14f;
    .title {
      min-width: 60px;
    }
    .date {
      min-width: 130px;
      margin-right: 10px;
    }
    .content {
      width: calc(100% - 220px);
    }
    .check-box {
      position: absolute;
      right: 10px;
    }
    .mark-icon {
      font-size: 20px;
      position: absolute;
      left: 10px;
      top: -5px;
    }
  }
}
.scroll-list::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
ul {
  padding-left: 0;
}
.bor_1 {
  border-left: 4px solid #ff0000;
  border-right: 4px solid #dd0202;
  .title {
    color: #ff0000;
  }
}
.bor_2 {
  border-left: 4px solid #eab71d;
  border-right: 4px solid #eab71d;
  .title {
    color: #eab71d;
  }
}
.bor_3 {
  border-left: 4px solid #4bd29a;
  border-right: 4px solid #4bd29a;
  .title {
    color: #4bd29a;
  }
}

效果