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

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

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

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

效果和下面这篇文章中的视频一样：Vue Element table表格实现表格数据动态滚动（无限滚动）_汪汪队出击的博客-CSDN博客_vue table数据滚动

  <viewclass="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-viewscroll-yref="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"><viewclass="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;
},

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

各种样式的表格数据自动统一抽取
各种样式的表格数据自动统一抽取程序和源代代码地址: https://github.com/Boris-2021/excel-Intelligent-extraction-merge 前言想象一下这 ...
拒绝“累丑”，告别加班，一键读取Excel表格数据自动录入至网页
朗思RPA:读取Excel表格数据自动录入到网页朗思无代码RPA社区版可永久免费下载体验~ 零代码,易学易操作,可视化界面,全中文化支持,助力企业数字化转型,让员工工作更高效!
php 无限滚动加载,无限滚动,_无限滚动加载数据问题，无限滚动 - phpStudy
无限滚动加载数据问题做移动端程序的时候,经常会遇到无限滚动的功能,通常实现无限滚动的方式是页面滚动到底部后出发一个ajax请求,后端返回数据然后动态追加DOM,但是如果DOM结构很复杂,追加的时候拼 ...
excel其中一个页签慢,excel表格12个页签数据汇总-Excel怎么实现多张表格数据自动汇总到一张表上...
excel表格中怎么把几个表格汇总在一起?一共12个这... 在工作中会遇到数据合并的问需要将当作簿中的全部工作表合并起.通常的做法是先新建一个空白的工作表,然后依次将有数据的工作表中的内容复制后,按 ...
关于Excel表格数据自动变为日期
1.excel 表格中的常规和日期. 在制表时,键入数据,有时它会自动变为日期.如首先,选中要修改的单元格,右键,设置单元格格式. 然后,选择"数字",在其分类中找到" ...
利用javascript实现表格数据自动从剪贴板录入
1.引用脚本 <script type="text/javascript" src="../scripts/clipboard.min.js">&l ...
提取不同表格数据自动生成三种表格(xlrd,openpyxl)
提取儿童版样式: 非儿童版样式: 生成标识卡表格: 卷标: 箱标: 代码: import openpyxl import os import xlrd import datetime from ope ...
table表格数据无缝循环向上滚动，hover后暂停滚动
先来效果图: 直接复制代码到vue就好了 <template><div class="listDiv"><div class="tableD ...
element-ui——timeline时间线组件+自动滚动+v-infinite-scroll无限滚动+动态加载——技能提升
最近看到同事在弄日志记录,需要实现的效果是: 自动滚动+无限滚动+动态加载数据最终效果图如下: 1.html部分 <template><div id="boxTimeli ...

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

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

最新文章

热门文章