实现表格⾃动⽆限滚动的⼏种⽅式实现表格⾃动⽆限滚动的⼏种⽅式
⼀、js进⾏控制
原理：通过js获取需要滚动的元素，通过定时改变scrollTop（t.scrollTop++）或者
transform（ansform='translateY(1px)'）来实现滚动，在滚动区域外
进⾏数据的调整，并矫正因数据变化⽽进⾏的变动。
例：
// 滚动
tableMove1(){
let t = ElementsByClassName("el-table__body-wrapper");//获取需要进⾏滚动的表格的容器let maxHeight = t[0].scrollHeight - t[0].offsetHeight;// 最⼤滚动⾼度
t[0].scrollTop++;
//滚动到底
if(t[0].scrollTop >= maxHeight){
if(this.tableData1.length <=this.t1l *2){
//当前表格长度⼩于等于原表格的两倍则复制⼀份表格添加进去，t1l是当前表格的原长度
this.tableData1 =at(this.tableData1);
}else{
//当前表格数据为两份原表格数据则向上滚动⼀份原表格的距离，rowHeight是每⾏表格⾼度
t[0].scrollTop = t[0].scrollTop -wHeight *this.t1l;
}marquee marquee
}
},
定时器
Interval(){
this.t1l =this.tableData1.length;//需要滚动的表格原长度
if(this.timer1){
clearInterval(this.timer1);
}else{
this.timer1 =setInterval(()=>{
//flat1是控制表格是否继续滚动，可写⼀个⿏标移⼊移出的函数来控制表格是否继续滚动
if(this.flat1)this.tableMove1();
},100/this.speed);//通过控制speed的值来进⾏对滚动速度的控制，值越⼤滚动越快
}
},
⼆、插件实现⾃动⽆限滚动
1.vue-seamless-scroll
2.liMarquee
3.swiper
4.⽹上⾃⼰。。。
三、html标签实现⾃动⽆限滚动
这种⽅法主要是利⽤了html⾥的<marquee></marquee>标签。
它具有以下⼏个重要属性：
滚动⽅向direction ：值可以是left，right，up，down，默认为left
滚动⽅式:behavior ：值可以是scroll(连续滚动)slide(滑动⼀次)alternate(来回滚动)
循环次数loop：值是正整数，默认为⽆限循环（-1）
滚动速度scrollamount ：值是正整数，默认为6
滚动延迟scrolldelay：值是正整数，默认为0，单位是毫秒
对齐⽅式align ：值可以是top，middle，bottom，默认为middle
背景颜⾊bgcolor：值是16进制的RGB颜⾊或者颜⾊名称
滚动范围height、width ：值是正整数(单位是像素)或百分数，默认width=100% height为标签内元素的⾼度。
空⽩空间hspace、vspace ：表⽰元素到区域边界的⽔平距离和垂直距离，值是正整数，单位是像素。
onmouseover=this.stop() onmouseout=this.start() ：表⽰当⿏标以上区域的时候滚动停⽌，当⿏标移开的时候⼜继续滚动。
四、css3动画实现⾃动⽆限滚动
步骤：
1.复制⼀份表格内容
2.利⽤动画实现需要滚动表格的移动⽅向，
3.调整两个表格的位置将两个表格之间的缝隙消除
例（具体数据需另调才能⽆缝）：
.ani-area{
width: 750px;
height: 140px;
margin-top: 10px;
position: relative;
border: solid;
border-color: aqua; overflow: hidden;
}
.
ani{
background: red;
position: relative;
animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: normal; animation-play-state: running; position: absolute;
width: 750px;
}
@keyframes myfirst{
0%{
background: red;
left: 0px;
top: 0%;
}
100%{
background: red;
left: 0px;
top: 100%;
}
}
.ani2{
background: red;
position: relative;
animation-name: myfirst2; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: normal; animation-play-state: running; position: absolute;
width: 750px;
}
@keyframes myfirst2{
0%{
background: red;
left: 0px;
top: -100%;
}
100%{
background: red;
left: 0px;
top: 0%;
}
}
五、过渡属性实现伪滚动
利⽤vue的过渡属性实现伪滚动：
原理：即进⾏数据变换的时候使⽤vue的过渡属性，使其因数据改变⽽进⾏的改变变得平滑，当使⽤定时器进⾏数据变更的时候，样式也会随之改变。
例：
<transition-group
name="flip-list"
>
<li v-for="item in tableData1":key="item.inspectionNo">
<tr>
...略
</tr>
</li>
</transition-group>
.flip-list-move{
transition: transform 1s;
}
tableUpdate1(){
let x =this.tableData1[0];
this.tableData1.shift();
this.tableData1.push(x);
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。