草庐IT

uniapp 微信小程序 ui-table 表头固定,可缩放,实现

anne都 2023-06-05 原文

效果图

表头固定,可缩放效果

前言

用到的组件:
使用uniapp内置组件 movable-view和movable-area实现表格缩放
使用uni-table 实现表格渲染(自带多选,没有头固定功能)

开始探索
实现表头固定功能,看到网上使用sticky定位封装table组件,需要自己另外实现多选等一些事件监听功能,单元格动态设置高度。可是我想偷懒,并且现在情况就是我不偷懒尝试去实现
还是会遇到如下一些问题

情况一:表头和表体分开控制,表体进行缩放,列头名称和列数据不能一一对应,左右拖动和缩放表体过程中会导致表头名称与表体数据不对应的问题。并且由于手机宽度有限,用户要单独左右滑动才能看到全部表头内容
情况二:表头和表体一起控制,一起缩放。列头名称和列数据才能一一对应,缩放过程中会导致表头不能固定,达不到表头固定效果。

失败告终

别灰心 我们自己来研究,哈哈哈哈

最终我花了三四天终于改出来了,发现自己之前走了太多弯路,简直太low了,缘来如此简单,根本不需要自己去重新手写table,也免去了重新做多选的功能

话不多说,上代码:

html文件

<movable-area scale-area >
				<movable-view  y="10"  style="height:10px;" direction="horizontal"   scale scale-min="1" scale-max="4">
					<view class="uni-container">
						<uni-table ref="table" :loading="userLoading" border stripe emptyText="暂无更多数据">
							<view  class="tableHead">
								<uni-tr>
									<uni-th align="center"><view style="width:150px;">姓名</view></uni-th>
									<uni-th align="center"><view style="width:150px;">部门</view></uni-th>
									<uni-th align="center"><view style="width:150px;">职位</view></uni-th>
									<uni-th align="center"><view style="width:150px;">角色</view></uni-th>
									<uni-th align="center"><view style="width:204px;">操作</view></uni-th>
								</uni-tr>
							</view>
							<view  class="tableBody" style="margin-top: 27px;">
								<uni-tr v-for="(item, index) in tableData" :key="index">
									<uni-td><view style="width:150px;">{{item.realname}}</view></uni-td>
									<uni-td><view style="width:150px;">{{item.name}}</view></uni-td>
									<uni-td><view style="width:150px;">{{item.post || ''}}</view></uni-td>
									<uni-td><view style="width:150px;">{{item.roleName}}</view></uni-td>
									<uni-td>
										<view class="uni-group" style="width:204px;">
											<button class="uni-button" size="mini" type="warn" @click="handleDel(item.userId)">删除</button>
										</view>
									</uni-td>
								</uni-tr>
							</view>
						</uni-table>
						<view class="uni-pagination-box" style="display:inline-block;margin-left:100px"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view>
					</view>
				</movable-view>
		    </movable-area>

css样式

	movable-view {
		display: flex;
		width: auto;
		height:auto;
		min-width:100%;
	}
	
	movable-area {
		height: 100%;
		width: 100%;
		position:fixed;
		overflow: scroll;
	}
  /* //表头固定样式 */
   .tableHead{
   	font-weight: bold;
   	color: #333333;
   	background: #F4F6FF;
   	z-index: 20;
   	position:fixed;
   	top:0;
   }
   .tableBody{
   	height: 500px;
   	overflow: scroll;
   	margin-top:42px;
   }

要点说明:

1,tableBody的margin-top值为你的表头高度
2,movable-view一定要设置高度,不然缩放过程中,会导致表头超出缩放区域,达不到固定表头的效果
3,th 和td 中间一定要加view 撑开宽度,来达到表头和表体单元格宽度一致的效果
4,direction要设置为horizontal,横向的,否则表格会随手指滑动上下移动,这不是我要的效果

最后是不是很简单。

有关uniapp 微信小程序 ui-table 表头固定,可缩放,实现的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序,虽然我自己可以处理一大堆yml文件,但我说的语言(非常)有限,最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器,其中一些翻译器不愿意或无法处理存储库中的100多个文件,处理语言数据。谢谢&问候,安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题,我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征,我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现,但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  3. ruby-on-rails - Prawn PDF : I need to generate nested tables - 2

    我需要一个表,其中行实际上是2行表,一个嵌套表是..我怎样才能在Prawn中做到这一点?也许我需要延期..但哪一个? 最佳答案 现在支持子表:Prawn::Document.generate("subtable.pdf")do|pdf|subtable=pdf.make_table([["sub"],["table"]])pdf.table([[subtable,"original"]])end 关于ruby-on-rails-PrawnPDF:Ineedtogeneratenested

  4. ruby-on-rails - 如何在 Ruby on Rails 中实现由 JSF 2.0 (Primefaces) 驱动的 UI 魔法 - 2

    按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭10年前。问题1)我想知道ruby​​onrails是否有功能类似于primefaces的gem。我问的原因是如果您使用primefaces(http://www.primefaces.org/showcase-labs/ui/home.jsf),开发人员无需担心javascript或jquery的东西。据我所知,JSF是一个规范,基于规范的各种可用实现,prim

  5. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目:明明的随机数题目输入描述输出描述:示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od,od薪资待遇,od机试题清单华为OD机试真题大全,用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  6. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  7. MIMO-OFDM无线通信技术及MATLAB实现(1)无线信道:传播和衰落 - 2

     MIMO技术的优缺点优点通过下面三个增益来总体概括:阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下,MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中,可以获得复用增益,即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中,可以获得分集增益,即可靠性性能的改善。分集增益用独立衰落支路数来描述,即分集指数。在使用了空时编码的MIMO系统中,由于接收天线或发射天线之间的间距较远,可认为它们各自的大尺度衰落是相互独立的,因此分布式MIMO

  8. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  9. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  10. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

随机推荐