前端列表可滚动，可轮播
<ulclass="scroll-list"ref="scroll_List"@mouseenter="cancelScroll()"@mouseleave="autoScroll()"><liclass="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;}
}
效果
)
