原生微信小程序画表格

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

效果:

相关推荐
低代码布道师3 小时前
家政预约小程序04活动管理表结构设计
低代码·小程序
大大。12 小时前
模仿微信小程序wx.showModal自定义弹窗,内容可以修改
微信小程序·小程序·notepad++
然后就去远行吧15 小时前
小程序样式 —— 20全局样式和局部样式
小程序
说私域17 小时前
开源AI智能名片2+1链动模式O2O商城小程序:以情感共鸣驱动用户归属与品牌建设的深度探索
人工智能·小程序
fakaifa1 天前
【最新】沃德协会管理系统源码+uniapp前端+环境教程
前端·小程序·uni-app·开源·php·生活
Dai_代代1 天前
uniapp小程序使用rich-text富文本图片溢出问题
小程序·uni-app·html
liyinchi19881 天前
uniapp 微信小程序开发使用高德地图、腾讯地图
微信小程序·小程序·uni-app
大大。1 天前
小程序 手写tab超出滑动。view超出可以横滑动
小程序
大大。1 天前
微信小程序自定义表格样式
微信小程序·小程序
QQ_7781329741 天前
小程序开发中,如何实现控制硬件设备
前端·微信小程序·小程序