美文网首页
vue实现列表无限滚动

vue实现列表无限滚动

作者: 上海_前端_求内推 | 来源:发表于2021-07-27 22:18 被阅读0次

1, html

<div class="screen_content_detail" id="dome_order">
                                <div class="title">

                                    <div class="item">项目</div>
                                    <div class="item">检查量</div>
                                    <div class="item">预约等待</div>
                                </div>

                                <div class="content" v-for="(value,key) in SpecializedList" id="dome_order1">
                                    <div class="item">{{value.R1}}</div>
                                    <div class="item">{{value.R2}} 人次</div>
                                    <div :class="getClassName(1)">{{value.R3}} 天{{getArrow(1)}}</div>
                                </div>
                                <div class="content" v-for="(value,key) in SpecializedList" id="dome_order2">
                                    <div class="item">{{value.R1}}</div>
                                    <div class="item">{{value.R2}} 人次</div>
                                    <div :class="getClassName(1)">{{value.R3}} 天{{getArrow(1)}}</div>
                                </div>
                            </div>

2.js

this.scrollTable("dome_order", "dome_order1", "dome_order2");

scrollTable(dome, dome1, dome2) {
var dome = document.getElementById(dome);
var dome1 = document.getElementById(dome1);
var dome2 = document.getElementById(dome2);
var speed = 60; //设置向上滚动速度
dome2.innerHTML = dome1.innerHTML; //复制dome1为dome2
function moveTop() {
if (dome2.offsetTop - dome.scrollTop <= 0) { //当滚动至dome1与dome2交界时
dome.scrollTop -= dome1.offsetHeight //dome跳到最顶端
} else {
dome.scrollTop++
}
}
var MyMar = setInterval(moveTop, speed); //设置定时器
dome.onmouseover = function () {
clearInterval(MyMar);
} //鼠标移上时清除定时器达到滚动停止的目的
dome.onmouseout = function () {
MyMar = setInterval(moveTop, speed);
} //鼠标移开时重设定时器,继续滚动
},
3,dome_order设置固定高度 overflow设置为hidden

相关文章

网友评论

      本文标题:vue实现列表无限滚动

      本文链接:https://www.haomeiwen.com/subject/dvkamltx.html