实现表格自动无限滚动的几种方式

实现表格自动无限滚动的几种方式

一、js进行控制

原理：通过js获取需要滚动的元素，通过定时改变scrollTop（t.scrollTop++）或者
transform（t.style.transform='translateY(1px)'）来实现滚动，在滚动区域外
进行数据的调整，并矫正因数据变化而进行的变动。

例：

    // 滚动
    tableMove1() {
      let t = document.getElementsByClassName("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 = this.tableData1.concat(this.tableData1);
        } else {
          //当前表格数据为两份原表格数据则向上滚动一份原表格的距离，rowHeight是每行表格高度
          t[0].scrollTop = t[0].scrollTop - this.rowHeight * this.t1l;
        }
      }
    },

定时器

      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
vue-seamless-scroll安装
vue-seamless-scroll使用
2.liMarquee
liMarquee – jQuery无缝滚动插件
3.swiper
swiper3插件无缝滚动配置
4.网上自己找。。。

三、html标签实现自动无限滚动

MDN官方文档(marquee)

	这种方法主要是利用了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动画实现自动无限滚动

菜鸟教程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的过渡属性实现伪滚动：
原理：即进行数据变换的时候使用vue的过渡属性，使其因数据改变而进行的改变变得平滑，当使用定时器进行数据
变更的时候，样式也会随之改变。
例：

<transition-group
        name="flip-list"
        style="padding: 0px;height: 100px; overflow: hidden;"
      >
        <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);
    },