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

【HarmonyOS Next】自定义Tabs

news 来源：原创 2025/9/1 13:47:03

背景

项目中Tabs的使用可以说是特别的频繁，但是官方提供的Tabs使用起来，存在tab选项卡切换动画滞后的问题。
请添加图片描述
原始动画无法满足产品的UI需求，因此，这篇文章将实现下面页面滑动，tab选项卡实时滑动的动画效果。
请添加图片描述

实现逻辑

需求讲解

  • 需要实现固定宽度下，放下6个选项卡。
  • 在没有选择时宽度均匀分配，选中时显示图标并且增加宽度。
  • 实现下方内容区域滑动时，上面选项卡实时跳动。
  • 实现动画效果，使整体操作更加流畅。

实现思路

1. 选项卡

  • 选项卡使用Row布局组件+layoutWeight属性，来实现平均布局。通过选项卡的选择索引来实现是否选中判断。
  • 选中时，layoutWeight值为1.5；没有选中时，layoutWeight值为1.
  • 使用animation属性，只要layoutWeight值变化时，可以触发动画。
  • 在外包裹的布局容器中，添加onAreaChange事件，用来计算整体Tab组件的宽度。
          Row() {Text(name).fontSize(16).fontWeight(this.SelectedTabIndex == index ? FontWeight.Bold : FontWeight.Normal).textAlign(TextAlign.Center).animation({ duration: 300 })Image($r('app.media.send')).width(14).height(14).margin({ left: 2 }).visibility(this.SelectedTabIndex == index ? Visibility.Visible : Visibility.None).animation({ duration: 300 })}.justifyContent(FlexAlign.Center).layoutWeight(this.SelectedTabIndex == index ? 1.5 : 1).animation({ duration: 300 })

2. 定位器

  • 使用Rect定义背景的形状和颜色+Stack布局+position属性，实现定位器的移动。
  • position属性中通过Left值的变化来实现Rect的移动。但是在swiper的滑动中会出现滑动一点然后松开的情况，因此，需要两个值同时在实现中间的移动过程。
      Stack() {Rect().height(30).stroke(Color.Black).radius(10).width(this.FirstWidth).fill("#bff9f2").position({left: this.IndicatorLeftOffset + this.IndicatorOffset,bottom: 0}).animation({ duration: 300, curve: Curve.LinearOutSlowIn })}.width("100%").alignRules({center: { anchor: "Tabs", align: VerticalAlign.Center }})

3.主要内容区

  • 使用Swiper组件加载对应的组件，这里需要注意的是，Demo没有考虑到内容比较多的优化方案，可以设置懒加载方案来实现性能的提升。
  • onAnimationStart事件，实现监测控件是向左移动还是向右移动，并且修改IndicatorLeftOffset偏移值。
  • onAnimationEnd事件，将中间移动过程值IndicatorOffset恢复成0。
  • onGestureSwipe事件，监测组件的实时滑动，这个事件在onAnimationStart和onAnimationEnd事件之前执行，执行完后才会执行onAnimationStart事件。因此，这个方法需要实时修改定位器的偏移数值。
  • 偏移数值是通过swiper的移动数值和整体宽度的比例方式进行计算，松手后的偏移方向，由onAnimationStart和onAnimationEnd事件来确定最终的距离
Swiper(this.SwiperController) {ForEach(this.TabNames, (name: string, index: number) => {Column() {Text(`${name} - ${index}`).fontSize(24).fontWeight(FontWeight.Bold)}.alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center).height("100%").width("100%")})}.onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => {if (targetIndex > index) {this.IndicatorLeftOffset += this.OtherWidth;} else if (targetIndex < index) {this.IndicatorLeftOffset -= this.OtherWidth;}this.IndicatorOffset = 0this.SelectedTabIndex = targetIndex}).onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => {this.IndicatorOffset = 0}).onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {let move: number = this.GetOffset(extraInfo.currentOffset);//这里需要限制边缘情况if ((this.SelectedTabIndex == 0 && extraInfo.currentOffset > 0) ||(this.SelectedTabIndex == this.TabNames.length - 1 && extraInfo.currentOffset < 0)) {return;}this.IndicatorOffset = extraInfo.currentOffset < 0 ? move : -move;}).onAreaChange((oldValue: Area, newValue: Area) => {let width = newValue.width.valueOf() as number;this.SwiperWidth = width;}).curve(Curve.LinearOutSlowIn).loop(false).indicator(false).width("100%").id("MainContext").alignRules({top: { anchor: "Tabs", align: VerticalAlign.Bottom },bottom: { anchor: "__container__", align: VerticalAlign.Bottom }})

代码文件

  • 里面涉及到资源的小图标，可以自己区定义的，文章就不提供了。
@Entry
@ComponentV2
struct Index {/*** 标头名称集合*/@Local TabNames: string[] = ["飞机", "铁路", "自驾", "地铁", "公交", "骑行"]/*** Tab选择索引*/@Local SelectedTabIndex: number = 0/*** 标点移动距离*/@Local IndicatorLeftOffset: number = 0/*** 标点在swiper的带动下移动的距离*/@Local IndicatorOffset: number = 0/*** 第一个宽度*/@Local FirstWidth: number = -1/*** 其他的宽度*/@Local OtherWidth: number = -1/*** Swiper控制器*/@Local SwiperController: SwiperController = new SwiperController()/*** Swiper容器宽度*/@Local SwiperWidth: number = 0build() {RelativeContainer() {Stack() {Rect().height(30).stroke(Color.Black).radius(10).width(this.FirstWidth).fill("#bff9f2").position({left: this.IndicatorLeftOffset + this.IndicatorOffset,bottom: 0}).animation({ duration: 300, curve: Curve.LinearOutSlowIn })}.width("100%").alignRules({center: { anchor: "Tabs", align: VerticalAlign.Center }})Row() {ForEach(this.TabNames, (name: string, index: number) => {Row() {Text(name).fontSize(16).fontWeight(this.SelectedTabIndex == index ? FontWeight.Bold : FontWeight.Normal).textAlign(TextAlign.Center).animation({ duration: 300 })Image($r('app.media.send')).width(14).height(14).margin({ left: 2 }).visibility(this.SelectedTabIndex == index ? Visibility.Visible : Visibility.None).animation({ duration: 300 })}.justifyContent(FlexAlign.Center).layoutWeight(this.SelectedTabIndex == index ? 1.5 : 1).animation({ duration: 300 }).onClick(() => {this.SelectedTabIndex = index;this.SwiperController.changeIndex(index, false);animateTo({ duration: 500, curve: Curve.LinearOutSlowIn }, () => {this.IndicatorLeftOffset = this.OtherWidth * index;})})})}.width("100%").height(30).id("Tabs").onAreaChange((oldValue: Area, newValue: Area) => {let tabWidth = newValue.width.valueOf() as number;this.FirstWidth = 1.5 * tabWidth / (this.TabNames.length + 0.5);this.OtherWidth = tabWidth / (this.TabNames.length + 0.5);})Swiper(this.SwiperController) {ForEach(this.TabNames, (name: string, index: number) => {Column() {Text(`${name} - ${index}`).fontSize(24).fontWeight(FontWeight.Bold)}.alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center).height("100%").width("100%")})}.onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => {if (targetIndex > index) {this.IndicatorLeftOffset += this.OtherWidth;} else if (targetIndex < index) {this.IndicatorLeftOffset -= this.OtherWidth;}this.IndicatorOffset = 0this.SelectedTabIndex = targetIndex}).onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => {this.IndicatorOffset = 0}).onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {let move: number = this.GetOffset(extraInfo.currentOffset);//这里需要限制边缘情况if ((this.SelectedTabIndex == 0 && extraInfo.currentOffset > 0) ||(this.SelectedTabIndex == this.TabNames.length - 1 && extraInfo.currentOffset < 0)) {return;}this.IndicatorOffset = extraInfo.currentOffset < 0 ? move : -move;}).onAreaChange((oldValue: Area, newValue: Area) => {let width = newValue.width.valueOf() as number;this.SwiperWidth = width;}).curve(Curve.LinearOutSlowIn).loop(false).indicator(false).width("100%").id("MainContext").alignRules({top: { anchor: "Tabs", align: VerticalAlign.Bottom },bottom: { anchor: "__container__", align: VerticalAlign.Bottom }})}.height('100%').width('100%').padding(10)}/*** 需要注意的点,当前方法仅计算偏移值，不带方向* @param swiperOffset* @returns*/GetOffset(swiperOffset: number): number {let swiperMoveRatio: number = Math.abs(swiperOffset / this.SwiperWidth);let tabMoveValue: number = swiperMoveRatio >= 1 ? this.OtherWidth : this.OtherWidth * swiperMoveRatio;return tabMoveValue;}
}

总结

这里实现了新的Tab选项卡的定义。但是没有进行高度封装，想法是方便读者理解组件的使用逻辑，而不是直接提供给读者进行调用。希望这篇文章可以帮助到你~~

相关文章：

【HarmonyOS Next】自定义Tabs

背景 项目中Tabs的使用可以说是特别的频繁&#xff0c;但是官方提供的Tabs使用起来&#xff0c;存在tab选项卡切换动画滞后的问题。 原始动画无法满足产品的UI需求&#xff0c;因此&#xff0c;这篇文章将实现下面页面滑动&#xff0c;tab选项卡实时滑动的动画效果。 实现逻…...

编程日记 2025/9/1 13:47:03

算法 并查集

目录 前言 一 并查集的思路 二 并查集的代码分析 三 实操我们的代码 四 并查集的代码优化 总结 前言 并查集主要是用来求解集合问题的&#xff0c;用来查找集合还有就是合并集合&#xff0c;可以把这个运用到最小生成树里面 一 并查集的思路 1 并查集的相关的操作…...

编程日记 2025/9/1 13:41:11

EP 架构：未来主流方向还是特定场景最优解？

DeepSeek MoE架构采用跨节点专家并行&#xff08;EP&#xff09;架构&#xff0c;在提升推理系统性能方面展现出巨大潜力。这一架构在发展进程中也面临诸多挑战&#xff0c;其未来究竟是会成为行业的主流方向&#xff0c;还是仅适用于特定场景&#xff0c;成为特定领域的最优解…...

编程日记 2025/9/1 13:45:02

记忆化搜索与动态规划：原理、实现与比较

记忆化搜索和动态规划是解决优化问题的两种重要方法&#xff0c;尤其在处理具有重叠子问题和最优子结构性质的问题时非常有效。 目录 1. 记忆化搜索&#xff08;Memoization&#xff09; 定义&#xff1a; 实现步骤&#xff1a; 示例代码&#xff08;斐波那契数列&#xff0…...

编程日记 2025/8/31 0:59:11

LLMR//https://github.com/microsoft/llmr?locale=zh-cn

https://github.com/microsoft/llmr?localezh-cn Introduction 这个 repo 包含 LLMR 中描述的代码&#xff0c;实现了混合现实框架的大型语言模型。 此软件包是“用语言创造世界”的原型&#xff0c;它允许通过自然语言实时创建具有视觉、行为和交互元素的对象、工具和场景…...

编程日记 2025/9/1 13:45:29

Free Auto Clicker - 在任意位置自动重复鼠标点击

“想让鼠标自己动起来&#xff0c;解放双手去做更有趣的事&#xff1f;”Free Auto Clicker 就像你的数字小助手&#xff0c;能在任意位置自动重复点击鼠标。从玩游戏到刷网页&#xff0c;这款免费工具让你告别枯燥的重复操作&#xff0c;效率瞬间起飞&#xff01; 你有没有想…...

编程日记 2025/8/30 14:20:53

高考數學。。。

2024上 具体来说&#xff0c;直线的参数方程可以写为&#xff1a; x1t y−t z1t 二、简答题(本大题共5小题&#xff0c;每小题7分&#xff0c;共35分。) 12.数学学习评价不仅要关注结果评价&#xff0c;也要关注过程评价。简要说明过程评价应关注哪几个方面。…...

编程日记 2025/8/16 10:28:17

MWC 2025｜紫光展锐联手美格智能发布5G通信模组SRM812

在2025年世界移动通信大会&#xff08;MWC 2025&#xff09;期间&#xff0c;紫光展锐携手美格智能正式推出了基于紫光展锐V620平台的第二代5G Sub6G R16模组SRM812&#xff0c;以超高性价比方案&#xff0c;全面赋能合作伙伴&#xff0c;加速5G规模化应用在各垂直领域的全面落…...

编程日记 2025/8/26 7:50:43

5分钟快速搭建一个 SpringBoot3 + MyBatis-Plus 工程项目

环境 idea 2023.3.5 jdk 17 mysql 8 创建SpringBoot工程 创建SpringBoot工程&#xff0c;这里有两种方式可选&#xff0c;一种是使用idea提供的Spring Initializr自动创建&#xff0c;一种是通过Maven Archetype手动创建 自动创建SpringBoot工程 使用Spring Initializr创建…...

编程日记 2025/9/1 13:45:26

深度学习-大白话解释循环神经网络RNN

目录 一、RNN的思想 二、RNN的基本结构 网络架构 ​关键点 三、RNN的前向传播 四、RNN的挑战：梯度爆炸和梯度消失 问题分析 ​示例推导 五、LSTM：RNN的改进 核心组件 ​网络架构 3. LSTM 的工作流程 4. 数学公式总结 5. LSTM 的优缺点 ​优点 ​缺点 6. LSTM 的…...

编程日记 2025/9/1 13:43:05

20.＜Spring图书管理系统①（登录+添加图书）＞

PS&#xff1a;关于接口定义 接口定义&#xff0c;通常由服务器提供方来定义。 1.路径&#xff1a;自己定义 2.参数&#xff1a;根据需求考虑&#xff0c;我们这个接口功能完成需要哪些信息。 3.返回结果&#xff1a;考虑我们能为对方提供什么。站在对方角度考虑。 我们使用到的…...

编程日记 2025/9/1 13:45:04

windows下使用Hyper+wsl实现ubuntu下git的平替

文章目录 前言一、安装Hyper、wsl1. 安装Hyper2. 安装wsl 二、配置Hyper三、安装并使用git总结 前言 众所周知&#xff0c;Ubuntu下安装git只需执行sudo apt install git即可使用默认终端拉取代码&#xff0c;但是Windows上使用git既没有linux便捷&#xff0c;又没有MacOS优雅…...

编程日记 2025/8/31 20:09:22

Python在实际工作中的运用-提取Pdf文件内容

Pdf文件是我们日常工作中经常会遇到的一种文件格式&#xff0c;对于这种文件的提取 pdfplumber 库可以非常出色的完成处理工作&#xff0c;它是一个纯 Python 第三方库&#xff0c;适合 python 3.x 版本&#xff0c;通常用来查看pdf各类信息&#xff0c;能有效提取文本、表格&…...

编程日记 2025/8/30 0:09:44

Python+Vue+数据可视化的考研知识共享平台（源码+论文+讲解+安装+调试+售后）

感兴趣的可以先收藏起来&#xff0c;还有大家在毕设选题&#xff0c;项目以及论文编写等相关问题都可以给我留言咨询&#xff0c;我会一一回复&#xff0c;希望帮助更多的人。 程序介绍 近些年来&#xff0c;科技以一种近乎狂飙突进的态势呈爆发式发展&#xff0c;成果之丰硕…...

编程日记 2025/9/1 6:39:15

VirtualBox虚拟机MacOS从Big Sur升级到Sequoia（失败）

VirtualBox虚拟机里安装好Big Sur版本&#xff0c;尝试升级到Sequoia&#xff0c;但是最终失败了。 软件升级 直接在系统偏好-软件更新里可以看到提示&#xff0c;提示可以升级到15版本Sequoia 点击同意&#xff0c;看能不能升级到Sequoia吧。升级前先用时光做了备份。 升级…...

编程日记 2025/8/20 8:19:17

深度学习---卷积神经网络

一、卷积尺寸计算公式 二、池化 池化分为最大池化和平均池化 最常用的就是最大池化&#xff0c;可以认为最大池化不需要引入计算&#xff0c;而平均池化需要引出计算&#xff08;计算平均数&#xff09; 每种池化还分为Pooling和AdaptiveAvgPool Pooling(2)就是每2*2个格子…...

编程日记 2025/8/30 16:07:34

深入解析网络协议：从OSI七层模型到HTTP与TCP/IP的关系

在网络的世界里&#xff0c;理解不同协议如何协同工作以实现高效、可靠的通信至关重要。无论是构建动态的Web应用&#xff0c;还是进行复杂的网络编程&#xff0c;对基础协议的理解都是不可或缺的。本文首先介绍OSI七层模型&#xff0c;这是一个为网络系统设计提供通用参考框架…...

编程日记 2025/9/1 13:43:06

链表-相关面试算法题

目录 面试题 02.04. 分割链表 面试题 02.05. 链表求和 面试题 02.06. 回文链表 面试题 02.07. 链表相交 面试题 02.04. 分割链表 面试题 02.04. 分割链表 给你一个链表的头节点 head 和一个特定值 x &#xff0c;请你对链表进行分隔&#xff0c;使得所有 小于 x 的节点…...

编程日记 2025/8/30 14:38:19

CSS Overflow 属性详解

CSS Overflow 属性详解 在网页设计和开发中，CSS Overflow 属性是一个非常重要的特性，它决定了当内容超出其容器大小时应该如何处理。本文将详细介绍 CSS Overflow 属性的相关知识，包括其语法、作用、常用属性值以及一些实际应用场景。 1. CSS Overflow 属性概述 CSS Over…...

编程日记 2025/8/27 3:32:35

一、MySQL备份恢复

一、MySQL备份恢复 1.1 MySQL日志管理 数据库中数据丢失或被破坏可能原因 误删除数据库 数据库工作时&#xff0c;意外断电或程序意外终止 由于病毒造成的数据库损坏或丢失 文件系统损坏后&#xff0c;系统进行自检操作 升级数据库时&#xff0c;命令语句不严格 设备故…...

编程日记 2025/9/1 13:26:37

Python-04BeautifulSoup网络爬虫

2025-03-04-BeautifulSoup网络爬虫 记录BeautifulSoup网络爬虫的核心知识点 文章目录 2025-03-04-BeautifulSoup网络爬虫 [toc]1-参考网址2-学习要点3-核心知识点1. 安装2. 导入必要的库3. 发送 HTTP 请求4. 创建 BeautifulSoup 对象5. 解析 HTML 内容5.1 查找标签5.2 根据属性…...

编程日记 2025/8/30 6:58:42

记录uniapp小程序对接腾讯IM即时通讯无ui集成（2）

完成以上步骤之后开始进行登录&#xff0c;登陆就需要账号。这个账号我们可以在腾讯云中创建。 有了账号之后开始去小程序进行登陆操作。腾讯云接口文档 这里除了帐号还需要一个校验值userSig正常项目开发这个字段可以在登陆后让后端返回&#xff0c;现在是测试我们直接去控制…...

编程日记 2025/8/23 2:15:11

DE2115实现4位全加器和3-8译码器（FPGA)

一、配置环境 1、Quartus 18.1安装教程 软件&#xff1a;Quartus版本&#xff1a;Quartus 18.1语言&#xff1a;英文大小&#xff1a;5.78G安装环境&#xff1a;Win11/Win10/Win8/Win7硬件要求&#xff1a;CPU2.0GHz 内存4G(或更高&#xff09; 下载通道①百度网盘丨64位下载…...

编程日记 2025/9/1 13:45:28

大白话面试中应对自我介绍

在面试中&#xff0c;自我介绍是开场的关键环节&#xff0c;它就像你递给面试官的一张“个人名片”&#xff0c;要让面试官快速了解你并对你产生兴趣。下面详细讲讲应对自我介绍的要点及回答范例。 一、自我介绍的时间把控 一般面试中的自我介绍控制在1 - 3分钟比较合适。时间…...

编程日记 2025/8/22 8:25:57

【JavaScript—前端快速入门】JavaScript 综合案例 — 猜数字

JavaScript 综合案例—猜数字 预期效果 需求 完成基本的页面布局在文本框输入数字后&#xff0c;点击"猜"按钮&#xff0c;结果那一行会显示"猜大了"或者"猜小了"每猜一次&#xff0c;就会增加一次猜的次数猜到数字后&#xff0c;结果显示要猜的…...

编程日记 2025/8/28 19:42:06

X Window---图形接口

摘抄自 鸟哥的linux私房菜 基础篇 第四版 有鉴于图形用户接口(Graphical User Interface, GUI) 的需求日益加重&#xff0c;在 1984 年由 MIT 与其他第三方首次发表了 X Window System &#xff0c;并且更在 1988 年成立了非营利性质的 XFree86 这个组织。所谓的XFree86 其实是…...

编程日记 2025/9/1 13:45:26

CSS浮动详解

1. 浮动的简介 浮动是用来实现文字环绕图片效果的 2.元素浮动后会有哪些影响 对兄弟元素的影响&#xff1a; 后面的兄弟元素&#xff0c;会占据浮动元素之前的位置&#xff0c;在浮动元素的下面&#xff1b;对前面的兄弟 无影响。 对父元素的影响&#xff1a; 不能撑起父元…...

编程日记 2025/9/1 13:45:03

shell脚本编程实践第2天

1 内容格式化 1.1 输出格式化 1.1.1 echo解读 学习目标 这一节&#xff0c;我们从 基础知识、简单实践、小结、三个方面来学习。 基础知识 命令简介 echo命令的功能是将内容输出到默认显示设备&#xff0c;一般起到一个提示的作用。OPTIONS&#xff1a; -n 不要在最后自…...

编程日记 2025/8/31 13:47:18

wgcloud-server端部署说明

Wgcloud 是一款开源的轻量级服务器监控系统&#xff0c;支持多平台&#xff0c;可对服务器的 CPU、内存、磁盘、网络等指标进行实时监控。 以下是 Wgcloud Server端的详细部署步骤&#xff1a; 环境准备 服务器&#xff1a; 至少准备两台服务器&#xff0c;一台作为监控端&a…...

编程日记 2025/8/30 10:22:35

AES/CBC/PKCS5Padding加密

1、加密代码如下 public static String encryptAEs_CBC(String data,String key,byte[] iv) {Cipher cipher = null;try {cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");//位数不够，自动补一个长度int blocksize = cipher.getBlockSize();byte[] dataBytes …...

编程日记 2025/8/31 5:30:56

9.8 Visual Studio 2022安装Qt 和安装graphic

1.安装Qt 1. 安装Qt 首先打开Visual Studio&#xff0c;然后创建一个项目&#xff0c;再在最上面的一行依次打开“扩展-->管理扩展”&#xff0c;再在搜索框内搜索“QT”&#xff0c;显示如下界面&#xff1a; 再在右边QT右边有个“在浏览器中查看”&#xff0c;打开后出现…...

编程日记 2025/9/1 13:45:02

【C++设计模式】第四篇：建造者模式（Builder）

注意&#xff1a;复现代码时&#xff0c;确保 VS2022 使用 C17/20 标准以支持现代特性。 分步骤构造复杂对象&#xff0c;实现灵活装配 1. 模式定义与用途 核心目标&#xff1a;将复杂对象的构建过程分离&#xff0c;使得同样的构建步骤可以创建不同的表示形式。 常见场景&am…...

编程日记 2025/8/21 13:55:44

Spring Boot如何利用Twilio Verify 发送验证码短信？

Twilio提供了一个名为 Twilio Verify 的服务&#xff0c;专门用于处理验证码的发送和验证。这是一个更为简化和安全的解决方案&#xff0c;适合需要用户身份验证的应用。 使用Twilio Verify服务的步骤 以下是如何在Spring Boot中集成Twilio Verify服务的步骤&#xff1a; 1.…...

编程日记 2025/9/1 13:47:02

制造业中的“大数据”：如何实现精准决策？

在当今全球经济竞争日趋激烈、技术变革周期不断缩短的环境下&#xff0c;制造业面临着全新的挑战和机遇。随着信息技术的飞速发展&#xff0c;“大数据”正以前所未有的速度渗透到制造业的各个环节&#xff0c;帮助企业实现更精准的决策、更灵活的生产组织以及更敏捷的市场响应…...

编程日记 2025/8/30 11:43:50

Linux cat 命令

cat&#xff08;英文全拼&#xff1a;concatenate&#xff09;命令用于连接文件并打印到标准输出设备上&#xff0c;它的主要作用是用于查看和连接文件。 使用权限 所有使用者 语法格式 cat [选项] [文件] 参数说明&#xff1a; -n&#xff1a;显示行号&#xff0c;会在输…...

编程日记 2025/8/29 15:21:47

CSS—flex布局、过渡transition属性、2D转换transform属性、3D转换transform属性

​ 1.flex布局 也叫弹性布局&#xff0c;是浏览器提倡的布局模型&#xff0c;非常适合结构化布局&#xff0c;提供了强大的空间分布和对齐能力&#xff0c;不会产生浮动布局中脱标现象&#xff0c;布局网页更简单&#xff0c;更灵活。 flex容器属性&#xff1a; 属性描述d…...

编程日记 2025/8/28 14:34:42

Java UDP 通信：实现简单的 Echo 服务器与客户端

在计算机网络编程中&#xff0c;UDP&#xff08;User Datagram Protocol&#xff09;是一种无连接的传输层协议&#xff0c;它允许应用程序在不建立连接的情况下发送数据包。与 TCP 不同&#xff0c;UDP 不保证数据包的顺序、可靠性或完整性&#xff0c;但它具有低延迟和低开销…...

编程日记 2025/9/1 13:47:01

使用GitLink个人建站服务部署Allure在线测试报告

更多技术文章&#xff0c;访问软件测试社区 文章目录 &#x1f680;前言&#x1f511;开通GitLink个人建站服务1. 前提条件2. 登录GitLink平台&#xff08;https://www.gitlink.org.cn/login&#xff09;3. 进入设置>个人建站>我的站点4. 新建站点5. 去仓部进行部署6. 安…...

编程日记 2025/9/1 13:41:12

Mybatis plus异常： type `java.time.LocalDateTime` not supported by default

1、问题&#xff1a; Java数据库实体对象有字段如下&#xff1a; TableField(typeHandler JacksonTypeHandler.class) private Map<String, Object> dataDetail; 如果dataDetail中有LocalDateTime对象&#xff0c;在保存时会报如下异常&#xff1a; Caused by: com.…...

编程日记 2025/8/30 22:57:25

Django：文件上传时报错in a frame because it set ‘X-Frame-Options‘ to ‘deny‘.

即&#xff1a;使用Content-Security-Policy 1.安装Django CSP中间件&#xff1a; pip install django-csp 2.更改项目配置&#xff1a; # settings.py MIDDLEWARE [...csp.middleware.CSPMiddleware,... ]CSP_DEFAULT_SRC ("self",) CSP_FRAME_ANCESTORS (&q…...

编程日记 2025/9/1 11:17:32

腾讯云 | 微搭低代码快速开发数据表单应用

如上所示&#xff0c;登录腾讯云微搭低代码业务控制台&#xff0c;开始新创建一个应用&#xff0c;创建应用的方式包括&#xff0c;根据实际的业务需求&#xff0c;从模版列表中选择一个模板填入数据模型创建新应用&#xff0c;使用微搭组件自主设计数据模型创建新应用&#xf…...

编程日记 2025/8/27 11:12:01

【RabbitMQ】RabbitMQ的核心概念与七大工作模式

&#x1f525;个人主页&#xff1a; 中草药 &#x1f525;专栏&#xff1a;【中间件】企业级中间件剖析 在现代分布式系统和微服务架构中&#xff0c;消息队列&#xff08;Message Queue&#xff09; 是解决服务间通信、系统解耦和流量削峰的关键技术之一。而 RabbitMQ 作为一…...

编程日记 2025/8/29 16:54:54

金蝶ERP星空对接流程

1.金蝶ERP星空OPENAPI地址&#xff1a; 金蝶云星空开放平台 2.下载金蝶云星空的对应SDK包 金蝶云星空开放平台 3.引入SDK流程步骤 引入Kingdee.CDP.WebApi.SDK 右键项目添加引用&#xff0c;在打开的引用管理器中选择浏览页签&#xff0c;点击浏览按钮&#xff0c;找到从官…...

编程日记 2025/8/28 6:51:14

【C++】基于范围的for循环（range-based for loop）

一. std::vector 元素排布顺序 在 C 中&#xff0c;std::vector 是一个动态数组&#xff0c;用于存储同类型元素的序列。当你向 std::vector 中添加元素时&#xff08;通常通过 push_back 方法&#xff09;&#xff0c;元素是按照你添加它们的顺序排列的。 具体来说&#xff…...

编程日记 2025/8/30 1:05:06

下载b站视频音频

文章目录 方案一&#xff1a;jjdown如何使用 方案二&#xff1a;bilibili哔哩哔哩下载助手如何使用进入插件网站插件下载插件安装 使用插件下载视频音频&#xff1a;复制音频下载地址 方案三&#xff1a;bat命令下载单个音频下载单个视频下载单个音视频 方案一&#xff1a;jjdo…...

编程日记 2025/8/30 1:05:08

LabVIEW DataSocket 通信库详解

dataskt.llb 是 LabVIEW 2019 内置的核心函数库之一&#xff0c;位于 vi.lib\Platform\ 目录下&#xff0c;专注于 DataSocket 技术的实现。DataSocket 是 NI 提供的网络通信协议&#xff0c;支持跨平台、跨设备的实时数据共享&#xff0c;广泛应用于远程监控、分布式系统集成等…...

编程日记 2025/8/31 0:29:01

金融项目实战

测试流程 测试流程 功能测试流程 功能测试流程 需求评审制定测试计划编写测试用例和评审用例执行缺陷管理测试报告 接口测试流程 接口测试流程 需求评审制定测试计划分析api文档编写测试用例搭建测试环境编写脚本执行脚本缺陷管理测试报告 测试步骤 测试步骤 需求评审 需求评…...

编程日记 2025/8/26 18:08:50

初始网络编程

什么是网络编程&#xff1f; 在网络通信协议下&#xff0c;不同计算机上运行的程序&#xff0c;进行的数据传输。 应用场景&#xff1a;即时通信、网游对战、金融证券、 国际贸易、邮件、等等。 不管是什么场景&#xff0c;都是计算机跟计算机之间通过网络进行数据传输。 …...

编程日记 2025/8/24 15:49:24

编译可以在Android手机上运行的ffmpeg程序

下载代码 git clone gitgithub.com:FFmpeg/FFmpeg.git git checkout n7.0建立build目录 mkdir build cd build创建build.sh脚本 vim build.sh这段脚本的主要功能是配置和编译 FFmpeg&#xff0c;使其能够在 Android 平台上运行&#xff0c;通过设置不同的架构和 API 级别&am…...

编程日记 2025/8/29 12:04:59

使用Kubernetes部署Spring Boot项目

目录 前提条件 新建Spring Boot项目并编写一个接口 新建Maven工程 导入 Spring Boot 相关的依赖 启动项目 编写Controller 测试接口 构建镜像 打jar包 新建Dockerfile文件 Linux目录准备 上传Dockerfile和target目录到Linux 制作镜像 查看镜像 测试镜像 上传镜…...

编程日记 2025/8/29 3:28:31