公告列表无缝滚动 vue + js
列表无缝滚动,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;
}
}
}
}
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)