原生微信小程序画表格

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);
            }
          }
    }

效果:

相关推荐
律宏阔6 小时前
微信小程序 + Taro + TDesign 去掉 [&&&],让普通 Tailwind 类接管局部样式
前端·微信小程序·taro
律宏阔7 小时前
微信小程序 + Taro + 多语言实现与国际化检查实录
前端·微信小程序·taro
李纲明1 天前
微信小程序 getSystemInfo 提示已废弃、屏幕高度算错胶囊还对不齐?getWindowInfo 和 getDeviceInfo 怎么接才稳
javascript·微信小程序·小程序·小程序开发·devdiy
dreams_dream1 天前
微信小程序-使用npm包
微信小程序·小程序·npm
L1mbo1 天前
Lite模式 缓解微信开发者工具卡顿,附 uni-app 实践方案
前端·微信小程序
caoliaoerweima1 天前
草料二维码小程序上线活码编辑器:手机上也能编辑活码了
智能手机·小程序·编辑器·草料二维码
大数据技术派2 天前
等了一周,我的摸鱼小程序终于微信认证通过了
微信小程序
CSharp精选营3 天前
记一次家庭物品管理的折腾:从“收纳”到“可检索”
微信小程序·aicoding·屋册有序·物品收纳管理·家庭收纳管理工具
dreams_dream4 天前
微信小程序:页面事件-上拉触底
微信小程序·小程序
鹏多多4 天前
AI 到底能不能独立做个产品?我拿一个小程序验证了
前端·微信小程序·ai编程