本文实例为大家分享了js实现列表向上无限滚动的具体代码,供大家参考,具体内容如下
先来一张效果图
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | < div class = "transdata1" > < ul class = "tody-table-header2" > < li >商品</ li > < li >数量(kg)</ li > < li >单价(元)</ li > < li >金额(元)</ li > </ ul > < div id = "detetion-box2" > < div id = "detetion-con1" > < ul v-for = "(item,index) in todayDetetion2" :key = "index" > < li >{{item.name}}</ li > < li >{{item.amount}}kg</ li > < li >{{item.price}}元/kg</ li > < li style = "color:rgba(0,255,204,1);" >{{item.money}}元</ li > </ ul > </ div > < div id = "detetion-con2" ></ div > </ div > </ div > |
js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | 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(样式自己调)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | .transdata 1 { 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-header 2 { overflow : hidden ; } .tody-table-header 2 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 , 255 , 1 ); text-align : center ; background : url ( "../../../static/img/thead_bg.png" ) no-repeat center / 100% ; background- size : 100% 100% ; } .tody-table-header 2 li:last-child { margin-right : 0 ; } #detetion-box 2 { margin-top : 13px ; height : 150px ; overflow : hidden ; } #detetion-box 2 ul { overflow : hidden ; border-bottom : 1px solid #0e579c ; } #detetion-box 2 li { width : 82px ; height : 24px ; line-height : 24px ; float : left ; margin-right : 48px ; font-size : 12px ; color : #fff ; } #detetion-box 2 ul li:last-child { margin-right : 0 ; } |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持H5前端开发社区。