vue + 无限滚动不同高度
2023-12-07 10:52 Jerrycoco 阅读(69) 评论(0) 编辑 收藏 举报
https://img2023.cnblogs.com/blog/3330485/202312/3330485-20231207105558288-1163344225.png
<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>
