原生微信小程序画表格

ops/2024/11/30 9:47:21/

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.ppmy.cn/ops/137894.html

相关文章

项目介绍和游戏搭建(拼图小游戏)

1. &#xff08;1&#xff09; import javax.swing.*;public class GameJFrame extends JFrame {//游戏主界面&#xff0c;游戏的所有逻辑public GameJFrame(){this.setSize(603,680);this.setVisible(true);//true是展示&#xff0c;flase是隐藏} } &#xff08;2&#xff…

c/c++ 用easyx图形库写一个射击游戏

#include <graphics.h> #include <conio.h> #include <stdlib.h> #include <time.h>// 定义游戏窗口的大小 #define WINDOW_WIDTH 800 #define WINDOW_HEIGHT 600// 定义玩家和目标的尺寸 #define PLAYER_SIZE 50 #define TARGET_SIZE 20// 玩家的结构…

线性回归模型参数的T检验

目录 T检验实战 T检验 在回归模型中&#xff0c;T检验通常用于检验线性回归系数的显著性。具体来说&#xff0c;T检验可以用来判断一个自变量对因变量的影响是否显著。 在进行线性回归时&#xff0c;我们通常会得到每个自变量的系数估计值&#xff08;通常用 β 来表示&#…

Python设计模式详解之14 —— 命令模式

命令模式 (Command Pattern) 是一种行为型设计模式&#xff0c;它将请求封装为对象&#xff0c;从而使您可以用不同的请求、队列或日志来参数化其他对象。命令模式还支持撤销操作。 在 Python 中&#xff0c;命令模式通常用来解耦命令的发送者&#xff08;调用者&#xff09;和…

鼠标前进后退键改双击,键盘映射(AutoHotkey)

初衷&#xff1a; 1.大部分鼠标为不可自定义按键&#xff0c;可以自定义的又很贵。 鼠标左键是双击是很频类很高的操作&#xff0c;鼠标前进/后退按键个人感觉使用频率很低&#xff0c;因此把鼠标前进/后退改为双击还是很合适的。 2.有些短款的键盘没有Home或End键&#xff0c;…

Vue 3 组件通信教程

Vue 3 组件通信教程 1. Props 父传子 1.1 基础用法 在 Vue 3 中&#xff0c;我们使用 defineProps 来声明组件的 props&#xff1a; <!-- 子组件 ChildComponent.vue --> <script setup> const props defineProps({message: String,count: {type: Number,requ…

激光雷达定位与建图-拟合问题

本篇文章介绍如何在点云中提取线段和平面。 一、平面拟合 1. 问题提出 给定一组由N个点组成的点云 X { x 1 , ⋯ , x n } X \left \{x_{1}, \cdots , x_{n} \right \} X{x1​,⋯,xn​} ,其中每个点取三维欧式坐标 x k x_{k} xk​&#xff0c;寻找一组平面参数n&#xff0c;…

人工智能如何改变你的生活?

在我们所处的这个快节奏的世界里&#xff0c;科技融入日常生活已然成为司空见惯的事&#xff0c;并且切实成为了我们生活的一部分。在这场科技变革中&#xff0c;最具变革性的角色之一便是人工智能&#xff08;AI&#xff09;。从我们清晨醒来直至夜晚入睡&#xff0c;人工智能…