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

村上春种树 lv.2

发布时间：2023-02-13 21:00:47 542

相关标签： # 数据

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

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

      class="table"
    ref="firstTable"
    :style="{ width: firstTableWidth + 'px', height: firstTableHeight + 'px' }"
  >
    
       生产订单号 
      产品编码
      产品名称
      计划日期
      数量
      进度
      状态 
    
          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"
    >
      
                  class="tr bg-g"
          :style="{
            color: fontColor,
            fontSize: firstTableDataFontSize + 'px',
            lineHeight: firstTableDataLineHeight + 'px',
            height: trHeight + 'px'
          }"
        >
          {{ item.productionOrderCode }}
          {{ item.productCode }}
 
          {{ item.productName }}
          
            
            
          
          {{ item.orderQuantity }}
          {{ item.percent + '%' }}
          
                          :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"
            >

  .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;
},

文章来源： https://blog.51cto.com/u_15957250/6042195

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。