当前位置: 首页 > article >正文

原生微信小程序画表格

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

效果:


http://www.kler.cn/a/415158.html

相关文章:

  • docker 创建Dockerfile
  • Vue.js 中的事件处理
  • sqlmap使用过程中的每个步骤及其相关命令
  • 【网络安全 | 漏洞挖掘】绕过SAML认证获得管理员面板访问权限
  • [Python/网络安全] Git漏洞之Githack工具基本安装及使用详析
  • 技术文档的艺术:在信息与理解之间架起桥梁
  • 嵌入式Rust小探
  • 利用树莓派Pico制作迷你小台灯:C++与硬件设计结合的分享
  • node.js基础学习-url模块-url地址处理(二)
  • JVM 常见面试题及解析(2024)
  • 网络安全(1)_对称加密和非对称加密
  • 本地局域 基于ip地址生成证书
  • 《Vue零基础入门教程》第十二课:双向绑定指令
  • 详细分析 npm run build 基本知识 | 不同环境不同命令
  • 数据库期末复习题库
  • Vue3组件异步懒加载defineAsyncComponent
  • 选择使用whisper.cpp进行语音转文字
  • SpringBoot连接测试InfluxDB时序数据库
  • 学习ASP.NET Core的身份认证(基于Session的身份认证1)
  • 使用命令行创建一个简单的 Maven Web 应用程序
  • MindAgent部署(进行中.....)
  • 23种设计模式-工厂方法(Factory Method)设计模式
  • sqli_labs-10,11,12 --详细解析
  • 叮!您的RK3568系统镜像备份方法请查收
  • 可视化建模以及UML期末复习篇----相关软件安装
  • web博客系统的自动化测试