Uni-app实现表格数据自动滚动(无限滚动)

需求：实现表格数据自动（无限）滚动（排除使用删除数组第一条数据添加到最后面的方法）

uniapp自带的table组件和插件市场中的插件都不能使用（因为uniapp无法操作原生DOM元素），因此，实现表头固定，表体数据滚动就只能使用view加上scroll-view来实现。使用flex布局加上view来实现表格，用scroll-view将需要滚动的数据包裹起来。话不多说直接贴代码（包括模板，样式，方法），可CV直接使用。

模板中的样式是动态绑定的样式，可根据自己需求修改（可以直接删除，不影响表格的使用）

效果和下面这篇文章中的视频一样：Vue Element table表格实现表格数据动态滚动（无限滚动）_汪汪队出击的博客-CSDN博客_vue table数据滚动（​​https://blog.csdn.net/qq_58671311/article/details/126886961?spm=1001.2014.3001.5502​​

  <view
    class="table"
    ref="firstTable"
    :style="{ width: firstTableWidth + 'px', height: firstTableHeight + 'px' }"
  >
    <view class="tr bg-w" :style="{ fontSize: firstTableHeadFontSize + 'px' }">
      <view class="th"> 生产订单号 </view>
      <view class="th">产品编码</view>
      <view class="th">产品名称</view>
      <view class="th">计划日期</view>
      <view class="th">数量</view>
      <view class="th">进度</view>
      <view class="th">状态 </view>
    </view>
    <scroll-view
      scroll-y
      ref="scroll"
      class="bg-white nav text-center"
      :style="{ height: firstTableHeight - 20 + 'px' }"
      show-scrollbar="false"
      :scroll-top="scrollTop"
      @scrolltolower="scrolltolower"
      lower-threshold="50"
    >
      <block v-for="(item, index) of tableData" :key="index">
        <view
          class="tr bg-g"
          :style="{
            color: fontColor,
            fontSize: firstTableDataFontSize + 'px',
            lineHeight: firstTableDataLineHeight + 'px',
            height: trHeight + 'px'
          }"
        >
          <view class="td">{{ item.productionOrderCode }}</view>
          <view class="td">{{ item.productCode }}</view>

          <view class="td">{{ item.productName }}</view>
          <view class="td">
            <uni-dateformat :date="item.plannedEndDate" format="yyyy-MM-dd">
            </uni-dateformat>
          </view>
          <view class="td">{{ item.orderQuantity }}</view>
          <view class="td">{{ item.percent + '%' }}</view>
          <view class="td">
            <uni-tag
              :text="item.productionProcessStateName"
              style="font-size: 30px; font-family: KaiTi"
              :style="{ fontSize: tagFontSize + 'px' }"
              :type="
                item.productionProcessState == 0
                  ? 'info'
                  : item.productionProcessState == 1
                  ? 'success'
                  : 'danger'
              "
              :circle="true"
            ></uni-tag>
          </view>
        </view>
      </block>
    </scroll-view>
  </view>

  .container {
    color: #358deb;
    padding: 10px;

    table {
      border: 0px solid darkgray;
    }
  }

  .tr {
    display: flex;
    /* height: 2.6rem; */
    color: #fff;
    align-items: center;
  }

  .td {
    word-break:break-all;
    text-align: center;
    flex: 1
  }

  .bg-w {
    /* background: snow;
  }
  .bg-g {
    /* background: #e6f3f9; */
  }

  .th {
    color: #fff;
    /* height: 2.6rem; */
    flex: 1;
    text-align: center;
  }

startMessageTimer() {
  clearInterval(this.interval); 
  let divData = this.$refs.scroll;
  this.interval = setInterval(() => {
  this.scrollTop += 1;
  }, 200);
},

scrolltolower() {
  this.scrollTop = 0;
},