小程序绘制表格table（表头固定，可上下左右滑动）

某天在写小程序表格时偶然发现小程序没有table标签，在微信小程序社区搜索了一番发现官方给出的说法是view能够满足table样式，足以替代table标签。

以下用原生的小程序代码写了一版简单的表格，其中表格可以左右滑动，固定表头上下滑动。

wxml

<!-- 表格 -->
<view class="table"><!-- 整体横向滑动 --><scroll-view class="tableX" scroll-x><!-- 表头 --><view class="tr"><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 class="tableY" scroll-y style="height: 900rpx;"><view class="tr" wx:for="{{18}}" wx:key="index"><view class="td">{{index}}</view><view class="td">{{"内容"}}</view><view class="td">{{"内容"}}</view><view class="td">{{"内容"}}</view><view class="td">{{"内容"}}</view><view class="td">{{"内容"}}</view><view class="td">{{"内容"}}</view></view></scroll-view></scroll-view>
</view>

wxss

/* 项目表格 */
.table {width: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;
}
.tableX {border: 1px solid #dadada;border-right: 0;border-bottom: 0;width: 93%;
}
.tr, .tableY {width: 1400rpx;display: flex;justify-content: flex-start;
}
.th,.td {width: 200rpx;padding: 10px 0;border-bottom: 1px solid #dadada;border-right: 1px solid #dadada;text-align: center;
}
.th {font-weight: bold;
}

后续再把表头写活，宽度自适应的话就更加完善了~

小程序绘制表格table（表头固定，可上下左右滑动）相关推荐

微信小程序展示列表之表头固定顶部
微信小程序表头固定顶部下面的例子适合于表头直接在顶部的需求没有查询条件之类的组件在上面 wxml中的代码的关键代码是 style="position:fixed; top:0;&q ...
微信小程序的表格table
今天开发微信小程序,在微信小程序的开发文档中,找组件,发现没有table组件.当时我的那个心情呀,各种不爽.于是,我打算自己写几个<text></text>来代替表格吧.然后就 ...
android 上下左右滑动的表格,适用小程序的表格table，冻结行，冻结列，可左右，上下滑动...
更新记录 1.0.0(2020-07-22) 1.暂时适用于微信小程序, 2.点击首列跳转或提示 3.首列合并行,首列背景色不一样 4.点击行变背景色平台兼容性 app 微信小程序支付宝小程序百 ...
小程序开发--表格table的实现
表格table的实现 Github:https://github.com/tomsiebel/MGTableView--MiniProgram Gitee:https://gitee.com/sieb ...
html 怎么置顶表格,表格(Table)表头固定，内容上滚【5个实例】
当表格往上滚动的时候,表头固定不动,这样可以让用户时刻看清每一列的数据含义,这是人性化的设计,充分考虑了用户使用体验.本文将通过5个实例,来介绍这种表格设计.用户可通过下载源码,直接应用于自己的项目里 ...
alter table add column多个字段_ElementUI表格el-table表头固定自适应高度解决方案
一.前言 ElementUI.iView都以相同的方式提供了表格组件表头固定的方法,即设置组件的height属性.表头固定很重要,就在于当表格数据项很多时,滚动条出现在表格组件内,而不是出现在表格组件 ...
微信小程序上实现 table 表格
微信小程序不支持 table 标签,在网上找到一个使用 flex 来实现表格的简明例子,记录一下. table.wxml <view class="table">< ...
微信小程序用表格＜table＞＜/table＞查看数据
微信小程序不支持 table 标签,所以自己写了一个,记录一下方便以后可以直接复制使用图片,可以自己修改样式 index.js,也就是数据,这里写死,可以字自己对接口 ** [ ] index.wx ...
table表头和首列的表格固定-JQuery、js实现的Table表头固定
这个是最简单的方法,基于jQuery的解决方案,引入一个两个js就可以解决,当然也有使用css, position: sticky,这个我下一章节会讲它的优缺点,当然为了凸显jQuery的优点, 我就 ...

小程序绘制表格table（表头固定，可上下左右滑动）

小程序绘制表格table（表头固定，可上下左右滑动）相关推荐

最新文章

热门文章