导语
在原生微信小程序开发中，有时候会遇到需要通过
表格来呈现一定的数据，尽管在移动端，使用表格来呈现数据，并不是常见的，但是也保不齐会遇到这样的需求，然而在原生微信小程序中，也并没有提供原生的table表格类标签供我们使用，这时候一般让人很无头绪，但是总要有人去先驱性的造轮子，经过参考大量社区中知识点的思路，还是东拼西凑的实现了一套表格类的控件。
先上预览图，供大家赏识：
注明：图二中，显得拥挤是因为我需求就是需要展示这么多数据，并且要一屏显示完，可自行依据业务需求调整。
上干货：html代码
<view class="table__box">
<scroll-view class="table__scroll" scroll-y scroll-x style="height:100%;">
<view class="table__scroll__view">
<view class="table__header">
<view class="table__header__item" wx:for="{{Rainfallheadtitle}}" wx:key="index">{{item.title}}</view>
</view>
<view class="table__content">
<view class="table__content__line" wx:for="{{RainfallItemdata}}" wx:key="index" wx:for-item="dataItem">
<view class="table__content__line__item" data-SiteDetails="{{dataItem}}" bindtap="viewdetail">{{dataItem.name}}</view>
<view class="table__content__line__item">{{dataItem.time}}</view>
<view class="table__content__line__item">{{dataItem.district}}</view>
<view class="table__content__line__item">{{dataItem.DRP}}mm</view>
</view>
</view>
</view>
</scroll-view>
</view>
说明: html 节点，根据后端返回 list 数据 wx:for 循环迭代生成出来的，表头同理
Rainfallheadtitle: [
{ title: "站点名" },
{ title: "时间" },
{ title: "行政区" },
{ title: "降雨量" },
],
RainfallItemdata: [],
SCSS：部分
.table__box {
width: 100%;
height: auto;
box-sizing: border-box;
position: relative;
z-index: 1;
border: 1px solid #E4E4E4;
.table__scroll {
overflow: hidden;
height: 100% !important;
background: #FFF;
.table__header {
width: 100%;
position: sticky;
top: 0;
z-index: 1;
display: flex;
/* display: grid; 网格布局 */
/* grid-auto-flow 属性控制自动放置的项目如何插入网格中 */
/* column 通过填充每一列来放置项目 */
grid-auto-flow: column;
font-size: 26rpx;
font-weight: bold;
color: #333333;
background: #F4F6FF;
.table__header__item {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
box-sizing: border-box;
background: #F4F6FF;
width: 55%;
height: 60rpx;
position: relative;
z-index: 888;
border: 1rpx solid #E4E4E4;
border-left: 0;
border-top: 0;
.timeicon {
padding-left: 10rpx;
color: #07b3f5;
font-weight: bold;
font-size: 35rpx;
}
}
.table__header__item:nth-child(n) {
width: 250rpx;
position: sticky;
left: 0;
z-index: 999;
}
}
.table__content {
background-color: #fff;
/* 这是兼容 iPhone x */
padding-bottom: 10rpx;
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
.table__content__line {
width: 100%;
display: flex;
grid-auto-flow: column;
position: relative;
}
.table__content__line__item {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
box-sizing: border-box;
background-color: #fff;
height: 80rpx;
border: 1rpx solid #E4E4E4;
border-left: 0;
border-top: 0;
font-size: 26rpx;
}
.table__content__line__item:nth-child(n) {
width: 250rpx;
position: sticky;
left: 0;
}
.table__content__line__item:nth-child(1) {
color: rgb(25, 215, 240);
}
.table__content__line__item:nth-child(3) {
font-weight: bold;
color: rgb(78, 142, 182);
}
}
}
}
随手记下的一笔，希望能帮到你，如果你有更好地方案，记得留在评论区开源哦🤭，让我也见识见识。文章来源：https://www.toymoban.com/news/detail-859554.html
🚵♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
🤼♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
——————————————————————————————文章来源地址https://www.toymoban.com/news/detail-859554.html
到了这里，关于微信原生小程序构建表格模板控件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
