原生微信小程序画表格

wxml部分:

复制代码
<view class="table__scroll__view">
                <view class="table__header">
                    <view class="table__header__item" wx:for="{{TableHeadtitle}}" wx:key="index">{{item.title}}</view>
                </view>
                <view class="table__content">
                    <view class="table__content__line">
                        <view class="table__content__line__item">{{0}}</view>
                        <view class="table__content__line__item">{{1}}</view>
                        <view class="table__content__line__item">{{2}}</view>
                        <view class="table__content__line__item">{{3}}</view>
                        <view class="table__content__line__item">{{4}}</view>
                 </view>
    </view>
</view>

js部分:

复制代码
TableHeadtitle: [
 { title: "" },
 { title: "待审核" },
 { title: "已通过" },
 { title: "退回" },
 { title: "总数" },
],

scss部分:

复制代码
 .table__scroll__view{
        margin-top: 10px;
        .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);
            }
          }
    }

效果:

相关推荐
m0_462803889 小时前
从信息管理视角看「按桌顺序分桌」:云分组优先分组的实现逻辑
微信小程序
爱折腾的编程老炮14 小时前
潮玩品牌自建抽盒机小程序——商城 + 抽盒 + 一番赏 + 会员 + 社区,一套代码怎么搭
spring boot·小程序·vue·mybatis·uniapp
新知图书14 小时前
第13章 从一句话需求到上线“续费管家”小程序
人工智能·小程序·智能体
数商云企1 天前
2026年陕西软件开发首选数商云企AI微入口小程序定制方案
人工智能·小程序
姜穆澜1 天前
OneID 从 0 到 1 完整生产案例(五)
大数据·notepad++
bug总结1 天前
uniapp 微信小程序分包规范
微信小程序·小程序·uni-app
Quor1 天前
小程序工作室:AI 生成即运行的可视化工作台
人工智能·小程序
盟道科技1 天前
小程序电商订单超时自动取消的三种实现方案:定时扫描、Redis 过期监听、延迟消息对比与生产落地
数据库·redis·小程序
lhldsg1 天前
智慧场馆解决方案小程序系统:从架构设计到落地实践
java·小程序·需求分析
凉红茶2 天前
用Cursor开发微信小程序的第一天
微信小程序·小程序·ai编程