公告列表无缝滚动 vue + js

1. html

<div class="model_func model_notice box_shadow">
     <div class="model_title">
         <div class="tit">公告列表</div>
         <div class="add">详情</div>
     </div>
     <div class="notice_box" ref="box"  @mouseenter="onNoticeMouseenter" @mouseleave="onNoticeMouseleave">
         <div class="notice_box_warpper" ref="boxWarpper">
             <ul class="notice_cal" ref="uls" v-if="noticeList.length!==0">
                 <li v-for="item in noticeList" :key="item.id" ref="lis" @click="handleNoticeLi(item.id)">
                     <div class="tit">
                         <span class="status" :class="item.noticeType==2?'noti':'anno'">【{{item.noticeType==2?"通知":"公告"}}】</span>
                         <span class="con">{{item.noticeTitle}}</span>
                     </div>
                     <div class="text" v-html="item.noticeContent"></div>
                 </li>
             </ul>
             <ul class="notice_cal_empyt empyt" v-else>
                 <span class="icon el-icon-data-analysis"></span>
                 暂无公告~~
             </ul>
         </div>
     </div>
 </div>

2. js

data(){
	return {
		index: 0,
        timer: null,
	}
}，
created(){
	this.noticeRoll()
},
method:{
    noticeRoll() {
       let box = this.$refs.box,
           boxWarp = this.$refs.boxWarpper,
           ulDom = this.$refs.uls
       clearInterval(this.timer)  //清除前一个定时器
       if (boxWarp.offsetHeight > box.offsetHeight) { //列表高度超出外框高度才滚动
           boxWarp.appendChild(ulDom.cloneNode(true)) // 复制并添加ul一个节点
           this.timer = setInterval(() => {
               this.index++
               if (this.index === ulDom.offsetHeight) { //滚动距离===ul高度
                   boxWarp.appendChild(ulDom.cloneNode(true)) //添加一个ul节点
               } else if (this.index === (ulDom.offsetHeight * 2 + 30)) { // 滚动距离===2个ul高度
                   this.index = 0 //滚动距离从0 开始
                   boxWarp.lastChild.remove() //清楚最后添加得第三个ul节点
               }
               boxWarp.style.top = "-" + this.index + "px"  //滚动距离 top:-this.index,css样式添加position:relative
           }, 25);
       }
   },
   onNoticeMouseenter() {//鼠标移入公告模块
       clearInterval(this.timer) //暂停滚动
       this.noticeFlag = true
   },
   onNoticeMouseleave() { //鼠标移出公告模块
       if (this.noticeList.length !== 0 && this.timer!=null) {
           let boxWarp = this.$refs.boxWarpper
           boxWarp.lastChild.remove() //清除多余的ul节点
           this.noticeRoll() //继续滚动
           this.noticeFlag = false
       }

   },
}

3. css（scss）

.model_notice {
    height: 463px;
    overflow: hidden;
    box-sizing: border-box;
    .notice_box {
        height: calc(100% - 90px);
        padding: 0 24px;
        overflow: hidden;
        .notice_box_warpper {
            position: relative;
            .notice_cal {
                li {
                    font-size: 14px;
                    margin-bottom: 15px;
                    cursor: pointer;
                    &:hover{
                        .tit .con{
                            color: #4d21bd;
                            text-decoration: underline;
                        }
                    }
                    .tit {
                        margin-bottom: 8px;
                        .status {
                            font-weight: 700;
                            &.noti {
                                color: #f10000;
                            }
                            &.anno {
                                color: #ff8705;
                            }
                        }
                        .con {
                            font-weight: 700;
                        }
                    }
                    .text {
                        line-height: 1.5;
                    }
                }
            }
        }
    }
}