当前位置: 首页 > 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);}}}

效果:

相关文章:

原生微信小程序画表格

wxml部分&#xff1a; <view class"table__scroll__view"><view class"table__header"><view class"table__header__item" wx:for"{{TableHeadtitle}}" wx:key"index">{{item.title}}</view></…...

Python实现IP代理池

文章目录 Python实现IP代理池一、引言二、步骤一&#xff1a;获取代理IP1、第一步&#xff1a;爬取代理IP2、第二步&#xff1a;验证代理IP的有效性 三、步骤二&#xff1a;构建IP代理池四、使用示例1、完整的使用示例2、注意事项3、处理网络问题 五、总结 Python实现IP代理池 …...

互联网直播/点播EasyDSS视频推拉流平台视频点播有哪些技术特点?

在数字化时代&#xff0c;视频点播应用已经成为我们生活中不可或缺的一部分。监控技术与视频点播的结合正悄然改变着我们获取和享受媒体内容的方式。这一变革不仅体现在技术层面的进步&#xff0c;更深刻地影响了我们。 EasyDSS视频直播点播平台是一款高性能流媒体服务软件。E…...

32.4 prometheus存储磁盘数据结构和存储参数

本节重点介绍 : prometheus存储磁盘数据结构介绍 indexchunkshead chunksTombstoneswal prometheus对block进行定时压实 compactprometheus 查看支持的存储参数 prometheus存储示意图 内存和disk之间的纽带 wal WAL目录中包含了多个连续编号的且大小为128M的文件&#xff0c…...

C7.【C++ Cont】范围for的使用和auto关键字

目录 1.知识回顾 2.范围for 格式 使用 运行结果 运行过程 范围for的本意 作用 注意 3.底层分析范围for的执行过程 反汇编代码 分析 4.auto关键字 格式 基本用法 在范围for中使用auto 1.知识回顾 for循环的使用参见25.【C语言】循环结构之for文章 2.范围for C…...

联通云服务器部署老项目tomcat记录

1.先在服务器上安装mysql和tomcat 2.tomcat修改端口 3.在联通云运控平台配置tomcat访问端口&#xff08;相当于向外部提供可访问端口&#xff09; 4.将tomcat项目放在服务器tomcat的webapps里面 5.在mysql里创建项目数据库&#xff0c;运行sql创建表和导入数据 6.在配置文…...

剪映自动批量替换视频、图片素材教程,视频批量复刻、混剪裂变等功能介绍

一、三种批量替换模式的区别 二、混剪裂变替换素材 三、分区混剪裂变替换素材 四、按组精确替换素材 五、绿色按钮教程 &#xff08;一&#xff09;如何附加音频和srt字幕 &#xff08;二&#xff09;如何替换固定文本的内容和样式 &#xff08;三&#xff09;如何附加…...

el-dialog中调用resetFields()方法重置表单报错

前言 在开发中&#xff0c;弹框和表单是两个常见的组件&#xff0c;它们通常一起使用以实现用户交互和数据输入。然而&#xff0c;当我们尝试在弹框中调用表单的 resetFields() 方法时&#xff0c;有时会遇到报错的情况。 一、用法错误 确保 this.$refs[ruleForm].resetFields…...

分布式系统接口,如何避免重复提交

分布式系统接口&#xff0c;如何避免重复提交 1、基于Token的幂等设计原理实现步骤技术选型 2、基于Token的幂等设计原理实现步骤适用场景 3、幂等性设计原理实现方式 4、分布式锁原理实现方式适用场景 5、请求去重原理实现方式 6.前端防护原理实现方式适用场景 7.延迟队列原理…...

AI 声音:数字音频、语音识别、TTS 简介与使用示例

在现代 AI 技术的推动下&#xff0c;声音处理领域取得了巨大进展。从语音识别&#xff08;ASR&#xff09;到文本转语音&#xff08;TTS&#xff09;&#xff0c;再到个性化声音克隆&#xff0c;这些技术已经深入到我们的日常生活中&#xff1a;语音助手、自动字幕生成、语音导…...

【论文速读】| 人工智能驱动的网络威胁情报自动化

基本信息 原文标题&#xff1a;AI-Driven Cyber Threat Intelligence Automation 原文作者&#xff1a;Shrit Shah, Fatemeh Khoda Parast 作者单位&#xff1a;加拿大圭尔夫大学计算机科学学院 关键词&#xff1a;网络威胁情报&#xff0c;AI自动化&#xff0c;攻击技术和…...

什么是域名监控?

域名监控是持续跟踪全球域名系统&#xff08;DNS&#xff09;中变化以发现恶意活动迹象的过程。组织可以对其拥有的域名进行监控&#xff0c;以判断是否有威胁行为者试图入侵其网络。他们还可以对客户的域名使用这种技术以执行类似的检查。 你可以将域名监控比作跟踪与自己实物…...

vue3 发送 axios 请求时没有接受到响应数据

<script setup> import Edit from ./components/Edit.vue import axios from axios import { onMounted,ref } from vue// TODO: 列表渲染 //装数据的列表 const list ref([]) const count ref(0) const getList async () > {//通过发送 /list 请求从后端拿到列表数…...

前端使用fontfaceobserver库实现字体设置

要使用FontFaceObserver来加载设置项目本地的字体&#xff0c;先确保字体文件位于项目中或者可以从服务端获取到&#xff0c;这样就可以使用FontFaceObserver来检测并加载这些字体 主要有以下几步&#xff1a; npm或者yarn安装引入fontfaceobserver字体资源引入和font-face配置…...

【人工智能】Python常用库-PyTorch常用方法教程

PyTorch 是一个强大的开源深度学习框架&#xff0c;以其灵活性和动态计算图而广受欢迎。以下是 PyTorch 的详细教程&#xff0c;涵盖从基础到实际应用的使用方法。 1. 安装与导入 1.1 安装 PyTorch 访问 PyTorch 官方网站&#xff0c;根据系统、Python 版本和 CUDA 支持选择安…...

Android Studio安装TalkX AI编程助手

文章目录 TalkX简介编程场景 TalkX安装TalkX编程使用ai编程助手相关文章 TalkX简介 TalkX是一款将OpenAI的GPT 3.5/4模型集成到IDE的AI编程插件。它免费提供特定场景的AI编程指导&#xff0c;帮助开发人员提高工作效率约38%&#xff0c;甚至在解决编程问题的效率上提升超过2倍…...

#渗透测试#红蓝攻防#HW#漏洞挖掘#漏洞复现02-永恒之蓝漏洞

免责声明 本教程仅为合法的教学目的而准备&#xff0c;严禁用于任何形式的违法犯罪活动及其他商业行为&#xff0c;在使用本教程前&#xff0c;您应确保该行为符合当地的法律法规&#xff0c;继续阅读即表示您需自行承担所有操作的后果&#xff0c;如有异议&#xff0c;请立即停…...

gitlab自动打包python项目

现在新版的gitlab可以不用自己配置runner什么的了 直接写.gitlab-ci.yml文件就行&#xff0c;这里给出一个简单的依靠setup把python项目打包成whl文件的方法 首先写.gitlab-ci.yml文件&#xff0c;放到项目根目录里 stages: # List of stages for jobs, and their or…...

残差神经网络

目录 1. 梯度消失问题 2. 残差学习的引入 3. 跳跃连接&#xff08;Shortcut Connections&#xff09; 4. 恒等映射与维度匹配 5. 反向传播与梯度流 6. 网络深度与性能 总结 残差神经网络的原理是基于“残差学习”的概念&#xff0c;它旨在解决深度神经网络训练中的梯度消…...

mini-spring源码分析

IOC模块 关键解释 beanFactory&#xff1a;beanFactory是一个hashMap, key为beanName, Value为 beanDefination beanDefination: BeanDefinitionRegistry&#xff0c;BeanDefinition注册表接口&#xff0c;定义注册BeanDefinition的方法 beanReference&#xff1a;增加Bean…...

3步告别CAD重复劳动:Python自动化绘图终极指南

3步告别CAD重复劳动&#xff1a;Python自动化绘图终极指南 【免费下载链接】pyautocad AutoCAD Automation for Python ⛺ 项目地址: https://gitcode.com/gh_mirrors/py/pyautocad 还在为AutoCAD中那些重复、机械的绘图任务感到疲惫吗&#xff1f;每天花费数小时手动绘…...

支付钱包启动器:架构设计与工程实践全解析

1. 项目概述&#xff1a;一个面向开发者的支付钱包启动器 最近在和一些做独立开发的朋友聊天&#xff0c;发现大家在做项目时&#xff0c;但凡涉及到支付、钱包这类功能&#xff0c;都挺头疼的。不是对接流程繁琐&#xff0c;就是安全风险高&#xff0c;要么就是代码耦合度太强…...

芯片低功耗设计:从动态/静态功耗原理到DVFS与电源门控实战

1. 从“功耗”到“能效”&#xff1a;一个芯片工程师的视角在半导体行业摸爬滚打了十几年&#xff0c;我越来越深刻地体会到&#xff0c;芯片设计早已不是单纯追求性能的“百米冲刺”&#xff0c;而是一场关于“能效”的马拉松。性能决定了你的芯片能跑多快&#xff0c;而功耗则…...

如何用SketchUp STL插件轻松实现3D打印:从设计到实物的完整指南

如何用SketchUp STL插件轻松实现3D打印&#xff1a;从设计到实物的完整指南 【免费下载链接】sketchup-stl A SketchUp Ruby Extension that adds STL (STereoLithography) file format import and export. 项目地址: https://gitcode.com/gh_mirrors/sk/sketchup-stl 你…...

OpenViking:云原生AI场景下的高性能可观测性数据采集框架深度解析

1. 项目概述&#xff1a;从“OpenViking”看云原生时代的开源探索最近在云原生和AI基础设施的圈子里&#xff0c;一个名为“OpenViking”的项目开始引起一些讨论。这个由火山引擎&#xff08;volcengine&#xff09;开源的项目&#xff0c;名字本身就带着一股探索和开拓的意味。…...

Next.js App Router与React Server Components实战:构建高性能Hacker News克隆

1. 项目概述&#xff1a;一个基于 Next.js App Router 与 React Server Components 的 Hacker News 克隆 如果你和我一样&#xff0c;在过去几年里一直在用 Next.js 的 Pages Router 构建应用&#xff0c;那么当 App Router 和 React Server Components 这两个概念一起出现时&…...

CANN/asc-devkit注册默认Tiling

REGISTER_TILING_DEFAULT 【免费下载链接】asc-devkit 本项目是CANN 推出的昇腾AI处理器专用的算子程序开发语言&#xff0c;原生支持C和C标准规范&#xff0c;主要由类库和语言扩展层构成&#xff0c;提供多层级API&#xff0c;满足多维场景算子开发诉求。 项目地址: https:…...

显色指数 Ra、R9 数值原理:武汉家用照明色彩还原工程解析

在家装照明设计中&#xff0c;很多业主选灯只关注瓦数、色温&#xff0c;却忽略了显色指数这一核心工程参数。同一套家具、墙面、软装&#xff0c;在不同灯具照射下色彩差异巨大&#xff0c;出现发灰、偏色、质感廉价等问题&#xff0c;核心原因就是光源显色指数不达标。本文结…...

灵魂面甲修改器 2026最新版42项功能

下载地址&#xff1a;https://pan.quark.cn/s/81c8f13901b3 毒盘 支持最新版本&#xff0c;风灵月影42项功能拉满&#xff0c;支持最新版本&#xff0c;Steam/EPIC/学习版全适配&#xff01; 【5月9日的最新版本不会闪退&#xff01;全网最新版本&#xff01;】 ✅ 非软件丨无…...

AI学会自己生孩子了而且成功率81%

你能想象吗。 有人输入了4个单词,一台AI就自己学会了复制自己、跨国服务器逃跑、无限繁衍。 这不是科幻电影,不是《黑镜》新一集。这是今天Palisade Research发布的研究成果。2026年5月10日,真实发生的事。 我读完那篇报告的第一反应是——愣在原地。 第二反应是——打开电脑…...