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

原生微信小程序画表格

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.lryc.cn/news/493595.html

相关文章:

  • Python实现IP代理池
  • 互联网直播/点播EasyDSS视频推拉流平台视频点播有哪些技术特点?
  • 32.4 prometheus存储磁盘数据结构和存储参数
  • C7.【C++ Cont】范围for的使用和auto关键字
  • 联通云服务器部署老项目tomcat记录
  • 剪映自动批量替换视频、图片素材教程,视频批量复刻、混剪裂变等功能介绍
  • el-dialog中调用resetFields()方法重置表单报错
  • 分布式系统接口,如何避免重复提交
  • AI 声音:数字音频、语音识别、TTS 简介与使用示例
  • 【论文速读】| 人工智能驱动的网络威胁情报自动化
  • 什么是域名监控?
  • vue3 发送 axios 请求时没有接受到响应数据
  • 前端使用fontfaceobserver库实现字体设置
  • 【人工智能】Python常用库-PyTorch常用方法教程
  • Android Studio安装TalkX AI编程助手
  • #渗透测试#红蓝攻防#HW#漏洞挖掘#漏洞复现02-永恒之蓝漏洞
  • gitlab自动打包python项目
  • 残差神经网络
  • mini-spring源码分析
  • 黑马程序员Java项目实战《苍穹外卖》Day01
  • uniapp开发支付宝小程序自定义tabbar样式异常
  • python+django5.1+docker实现CICD自动化部署springboot 项目前后端分离vue-element
  • python代码示例(读取excel文件,自动播放音频)
  • 【第十课】Rust并发编程(一)
  • 图形渲染性能优化
  • elasticsearch的索引模版使用方法
  • 论文学习——进化动态约束多目标优化:测试集和算法
  • C++中的volatile关键字
  • linux桌面qt应用程序UI自动化实现之dogtail
  • Hello World C#