html无限向上滚动查询,js实现列表向上无限滚动

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

先来一张效果图

html

• 商品
• 数量(kg)
• 单价(元)
• 金额(元)

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

js

getData() {

var _this = this;

this.$axios

.get("请求的url")

.then(res => {

this.todayDetetion2 = res.data.data;

this.$nextTick(() => {

this.ScrollUp2();

});

})

.catch(err => {});

},ScrollUp2() {

var Box = document.getElementById("detetion-Box2");

var con1 = document.getElementById("detetion-con1");

var con2 = document.getElementById("detetion-con2");

this.speed = 50;

if (con1.offsetHeight >= Box.offsetHeight) {

con2.innerHTML = con1.innerHTML;

var timer1 = setInterval(scrol,this.speed);

function scrol() {

/*判断滚动内容是否已经滚完，滚完了则滚动的值重新设置到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-repeat center/100%

100%;

height: 237px;

padding: 36px 28px 16px 20px;

Box-sizing: border-Box;

transform: translateY(-12px);

}

.tody-table-header2 {

overflow: hidden;

}

.tody-table-header2 li {

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,1);

text-align: center;

background: url("../../../static/img/thead_bg.png") no-repeat center/100%;

background-size: 100% 100%;

}

.tody-table-header2 li:last-child {

margin-right: 0;

}

#detetion-Box2 {

margin-top: 13px;

height: 150px;

overflow: hidden;

}

#detetion-Box2 ul {

overflow: hidden;

border-bottom: 1px solid #0e579c;

}

#detetion-Box2 li {

width: 82px;

height: 24px;

line-height: 24px;

float: left;

margin-right: 48px;

font-size: 12px;

color: #fff;

}

#detetion-Box2 ul li:last-child {

margin-right: 0;

}

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

总结

以上是编程之家为你收集整理的js实现列表向上无限滚动全部内容，希望文章能够帮你解决js实现列表向上无限滚动所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！