微信原生小程序构建表格模板控件

导语

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

---

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

---

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