导语

在原生微信小程序开发中，有时候会遇到需要通过表格来呈现一定的数据，尽管在移动端，使用表格来呈现数据，并不是常见的，但是也保不齐会遇到这样的需求，然而在原生微信小程序中，也 并没有提供 原生的 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);}}}}

---

随手记下的一笔，希望能帮到你，如果你有更好地方案，记得留在评论区开源哦🤭，让我也见识见识。

---

🚵‍♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
🤼‍♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
——————————————————————————————