<div class="exbox" style="height:461px;overflow:auto" @mouseenter="handleMouseEnter()" @mouseleave="handleMouseLeave()"> <div class="main rollul" ref="textList" id="caseDatasBox" v-if="caseData.length !== 0"> <div @click="handleItem(index, item)" class="msg msgli" :class="itemIndex === index ? 'msg-active' : ''" v-for="(item, index) in caseData" :key="index"> <div class="content"> <div class="icon"><img style="height: 76px;" src="./images/load01.png" /></div> <div class="info"> <div> <div class="top-box"> <div class="err-name" :title="item.ERR_NAME - item.STAGE_CAUSE"> {{ item.ERR_NAME }}<span v-if="item.STAGE_CAUSE !== null">-</span>{{ item.STAGE_CAUSE }}</div> <div style="margin-left: 10px;margin-top: -3px;"><el-rate v-model="item.CASE_RANK" disabled text-color="#ff9900"></el-rate></div> </div> <div class="bottom-box" :title="item.CASE_INTRODUCE">{{ item.CASE_INTRODUCE }}</div> </div> </div> <div style="position: absolute;right: 32px;top: 8px;"> <span style="vertical-align: middle;"><img src="./images/qi.png" /></span> <span>{{ item.ENTRY_NAME }}</span> </div> <div v-show="btnIndex !== 2" @click="handleCollect(item)" class="icon2"></div> </div> </div> </div> <div class="no-data" v-if="caseData.length === 0">暂无数据</div> </div> data() { return { itemIndex： 0， tomShow: false, times: null, caseData: [ { ERR_NAME: '1电磁干扰', STAGE_CAUSE: '副标题', CASE_RANK: 4, CASE_INTRODUCE: '2023年3月16-17日,陕西省延安站数据正确率为88.65%,电磁干扰异常频次1次,故障坏图29次。', ENTRY_NAME: '贡献人' }, { ERR_NAME: '2电磁干扰', STAGE_CAUSE: '副标题', CASE_RANK: 4, CASE_INTRODUCE: '2023年3月16-17日,陕西省延安站数据正确率为88.65%,电磁干扰异常频次1次,故障坏图29次。2023年3月16-17日,陕西省延安站数据正确率为88.65%,电磁干扰异常频次1次,故障坏图29次。', ENTRY_NAME: '贡献人' }, { ERR_NAME: '3电磁干扰', STAGE_CAUSE: '副标题', CASE_RANK: 4, CASE_INTRODUCE: '2023年3月16-17日,陕西省延安站数据正确率为88.65%,电磁干扰异常频次1次,故障坏图29次。2023年3月16-17日,陕西省延安站数据正确率为88.65%,电磁干扰异常频', ENTRY_NAME: '贡献人' }, { ERR_NAME: '4电磁干扰', STAGE_CAUSE: '副标题', CASE_RANK: 4, CASE_INTRODUCE: '2023年3月16-17日,陕西省延安站数据正确率为88.65%,电磁干扰异常频次1次,故障坏图29次。2023年3月16-17日,陕西省延安站数据正确率为88.65%,电磁干扰异常频次1次,故障坏图29次。', ENTRY_NAME: '贡献人' }, { ERR_NAME: '5电磁干扰', STAGE_CAUSE: '副标题', CASE_RANK: 4, CASE_INTRODUCE: '2023年3月16-17日,陕西省延安站数据正确率为88.65%,电磁干扰异常频次1次,故障坏图29次。', ENTRY_NAME: '贡献人' }, { ERR_NAME: '6电磁干扰', STAGE_CAUSE: '副标题', CASE_RANK: 4, CASE_INTRODUCE: '2023年3月16-17日,陕西省延安站数据正确率为88.65%,电磁干扰异常频次1次,故障坏图29次。2023年3月16-17日,', ENTRY_NAME: '贡献人' }, { ERR_NAME: '7电磁干扰', STAGE_CAUSE: '副标题', CASE_RANK: 4, CASE_INTRODUCE: '2023年3月16-17日,陕西省延安站数据正确率为88.65%,电磁干扰异常频次1次,故障坏图29次。', ENTRY_NAME: '贡献人' }, { ERR_NAME: '8电磁干扰', STAGE_CAUSE: '副标题', CASE_RANK: 4, CASE_INTRODUCE: '2023年3月16-17日,陕西省延安站数据正确率为88.65%,电磁干扰异常频次1次,故障坏图29次。2023年3月16-17日,陕西省延安站数据正确率为88.65%,', ENTRY_NAME: '贡献人' } ], } } methods:{ handleMouseEnter() { // 当鼠标悬停时触发的事件 clearTimeout(this.timer) }, handleMouseLeave() { // 当鼠标离开时触发的事件 this.startPlay() }, startPlay() { // 无限滚动 const that = this clearInterval(that.timer) that.$nextTick(() => { that.timer = setInterval(() => { const textList = this.$refs.textList // 使用 CSS 过渡效果滚动 textList.style.transition = 'transform 1s ease-in-out' // 增加过渡时间 textList.style.transform = 'translateY(-39%)' setTimeout(() => { if (that.itemIndex <= 0) { that.itemIndex = that.caseData.length - 1 } else { that.itemIndex-- } // 将第一个元素移动到数组末尾 const data = that.caseData[0] that.caseData.splice(0, 1) that.caseData.push(data) textList.style.transition = 'none' textList.style.transform = 'translateY(0)' }, 1000) // 增加定时器间隔时间，使滚动更慢 }, 10000) }) } } watch: { tomShow: { handler() { const textList = this.$refs.textList textList.style.transition = 'none' textList.style.transform = 'translateY(0)' }, deep: true } }, mounted () { clearInterval(this.timer) // 鼠标移入清除定时器 // this.tomShow = !this.tomShow // 如有其他tab点击事件放在点击事件函数中 } <style lang="stylus" scoped> .rollul{ height:300px; position: relative; } .main { .msg { width: 731px; // height: 90px; background: url('./images/color01.png'); margin-bottom: 25px; background: #012c5c; border-radius: 5px; cursor: pointer; position: relative; transition: top 0.5s ease; // border-bottom: 1px dashed #00ddfd; .content { display: flex; position: relative;
.icon { width: 80px; display: flex; justify-content: center; align-items: center; }
.info { max-width: 609px; font-size: 16px; margin-top: 10px;
.top-box { color: #0295d7; // margin-bottom: 10px; display: flex;
.err-name { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 400px; color: #00ddfd; } }
.bottom-box { line-height: 18px; max-width: 609px; margin-top: 5px; margin-bottom: 5px; font-size:15px; height:54px; } }
.icon2 { width: 19px; height: 18px; background: url('./images/add.png'); position: absolute; right: 5px; top: 6px; } } }
.msg-active { background: url('./images/item-active.png'); background-size: 100% 100%; transition: top 0.5s ease; }
.msg:before { content: ''; position: absolute; left: 0px; bottom: -15px; right: 0px; border-bottom: 1px dashed #00ddfd; } } </style> 标签：CASE,vue,滚动,NAME,17,16,电磁干扰,正确率,无限 From： https://www.cnblogs.com/jerrycoco/p/17881230.html