好资源导航 » 文章资讯 » js实现列表向上无限滚动

js实现列表向上无限滚动

2023-08-03 04:39:03 67

本文实例为大家分享了js实现列表向上无限滚动的具体代码，供大家参考，具体内容如下

先来一张效果图

html



商品
数量（kg）
单价（元）
金额（元）




{{item.name}}
{{item.amount}}kg
{{item.price}}元/kg
{{item.money}}元

getData(){
var_this=this;
this.$axios
.get("请求的url")
.then(res=>{
this.todayDetetion2=res.data.data;
this.$nextTick(()=>{
this.ScrollUp2();
});
})
.catch(err=>{});
},
ScrollUp2(){
varbox=document.getElementById("detetion-box2");
varcon1=document.getElementById("detetion-con1");
varcon2=document.getElementById("detetion-con2");
this.speed=50;
if(con1.offsetHeight>=box.offsetHeight){
con2.innerHTML=con1.innerHTML;
vartimer1=setInterval(scrol,this.speed);
functionscrol(){
/*判断滚动内容是否已经滚完，滚完了则滚动的值重新设置到0，否则就每个30默秒向上滚动1px*/
if(box.scrollTop>=con1.scrollHeight){
box.scrollTop=0;
}else{
box.scrollTop++;
}
/*判断滚动的距离刚好为一条公告的高度时停掉定时器，隔1s之后重新启动计时器即可实现公告滚动停留效果*/
if(box.scrollTop%25==0){
clearInterval(timer1);
setTimeout(()=>{
timer1=setInterval(scrol,30);
},2000);
}
}
}
}

css(样式自己调)

.transdata1{
background:url("../../../static/img/transdata_bg.png")no-repeatcenter/100%
100%;
height:237px;
padding:36px28px16px20px;
box-sizing:border-box;
transform:translateY(-12px);
}
.tody-table-header2{
overflow:hidden;
}

.tody-table-header2li{
height:24px;
width:82px;
line-height:24px;
list-style:none;
float:left;
font-size:13px;
margin-right:48px;
font-family:MicrosoftYaHei;
color:rgba(127,250,255,1);
text-align:center;
background:url("../../../static/img/thead_bg.png")no-repeatcenter/100%;
background-size:100%100%;
}
.tody-table-header2li:last-child{
margin-right:0;
}
#detetion-box2{
margin-top:13px;
height:150px;
overflow:hidden;
}
#detetion-box2ul{
overflow:hidden;
border-bottom:1pxsolid#0e579c;
}
#detetion-box2li{
width:82px;
height:24px;
line-height:24px;
float:left;
margin-right:48px;
font-size:12px;
color:#fff;
}
#detetion-box2ulli:last-child{
margin-right:0;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

js实现列表向上无限滚动

热门推荐

随机推荐