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

uni——不规则tab切换(skew)

案例展示

在这里插入图片描述

案例代码

<!-- 切换栏 -->
<view class="tabBoxs"><view class="tabBox"><block v-for="(item,index) in tabList" :key="index"><view class="tabItem":class="current == item.id&&current==1?'activeLeft':current == item.id&&current==2?'activeRight':''"@click="changeTab(item)">{{item.name}}<view class="underLine" v-if="current == item.id"></view></view></block></view>
</view>
const tabList = ref([{id: 1,name: '标题1'
}, {id: 2,name: '标题2'
}])
const current = ref(1)function changeTab(item) {current.value = item.id
}
.tabBoxs {margin: 0 25rpx;border: 1px solid green;height: 96rpx;position: relative;.tabBox {position: absolute;bottom: 0;width: 100%;height: 84rpx;background: rgba(255, 255, 255, 0.73);border-radius: 15rpx 15rpx 0rpx 0rpx;display: flex;justify-content: space-between;align-items: center;.tabItem {flex: 1;text-align: center;font-size: 30rpx;color: #3D3D3D;position: relative;.underLine {position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);width: 78rpx;height: 9rpx;background: #FC5C2B;border-radius: 60rpx 60rpx 60rpx 60rpx;}}.activeLeft {transform: translateY(-8rpx);height: 96rpx;display: flex;align-items: center;justify-content: center;border-radius: 15rpx 15rpx 0 0;background-color: #ffffff;font-size: 32rpx;color: #FC5C2B;position: relative;&::after {content: "";position: absolute;top: 0;right: -8px;width: 40rpx;height: 96rpx;border-radius: 0 11px 0 0;background: #ffffff;transform: skewX(8deg);}}.activeRight {transform: translateY(-8rpx);height: 96rpx;display: flex;align-items: center;justify-content: center;border-radius: 15rpx 15rpx 0 0;background-color: #ffffff;font-size: 32rpx;color: #FC5C2B;position: relative;&::after {content: "";position: absolute;top: 0;left: -8px;width: 40rpx;height: 96rpx;border-radius: 11px 0 0 0;background: #ffffff;transform: skewX(-8deg);}}}
}

参考按钮网站

https://juejin.cn/post/7036549260241797134

相关文章:

uni——不规则tab切换(skew)

案例展示 案例代码 <!-- 切换栏 --> <view class"tabBoxs"><view class"tabBox"><block v-for"(item,index) in tabList" :key"index"><view class"tabItem":class"current item.id&…...

Docker安装Grafana以及Grafana应用

Doker基础 安装 1、 卸载旧的版本 sudo yum remove docker docker-client docker-client-latest docker-common docker-latest docker-latest-logrotate docker-logrotate docker-engine 2、需要的安装包 sudo yum install -y yum-utils 3、设置镜像的仓库 yum-config-m…...

OpenSource - 分布式重试平台

文章目录 概述重试方案对比设计思想流量管理平台预览场景应用强通知场景发送MQ场景回调场景异步场景 概述 在当前广泛流行的分布式系统中&#xff0c;确保系统数据的一致性和正确性是一项重大挑战。为了解决分布式事务问题&#xff0c;涌现了许多理论和业务实践&#xff0c;其…...

oracle稳定执行计划

二、稳定执行计划 &#xff08;一&#xff09;sql profile的好处 稳定执行计划 在不能修改目标sql的sql文本的情况下使目标sql语句按照指定的执行计划运行。 1、automatic类型的sql profile 本质是针对目标sql的一些额外的调整信息&#xff0c;这些额外的调整信息需要与原目标s…...

docker安装neo4j

参考文章&#xff1a; 1、Mac 本地以 docker 方式配置 neo4j_neo4j mac docker_Abandon_first的博客-CSDN博客 2、https://www.cnblogs.com/caoyusang/p/13610408.html 安装的时候&#xff0c;参考了以上文章。遇到了一些问题&#xff0c;记录下自己的安装过程&#xff1a; …...

第十五章 定义 HL7 的 DTL 数据转换

文章目录 第十五章 定义 HL7 的 DTL 数据转换 第十五章 定义 HL7 的 DTL 数据转换 每个接口可能需要一定数量的数据转换。创建转换时&#xff0c;不要使用保留的包名称。 重要提示&#xff1a;请勿在数据转换中手动更改 HL7 转义序列&#xff1b;自动处理这些。 可以使用“数…...

【笔记】移动光猫改桥接

1. 登录后台 移动光猫的超管和密码&#xff08;百度的&#xff09; 账号&#xff1a;CMCCAdmin 密码&#xff1a;aDm8H%MdA 浏览器访问 192.168.1.1 并登录 2. 选择连接 点击“网络”&#xff0c;在“连接名称”下拉框选择 INTENET_R_VID 字样的连接&#xff0c;并截图备…...

网络安全进阶学习第十四课——MSSQL注入

文章目录 一、MSsql数据库二、MSsql结构三、MSsql重点表1、master 数据库中的Sysdatabases 表2、Sysobjects 表3、Syscolumns 表 四、Mssql常用函数五、Mssql的报错注入六、Mssql的盲注常用以下函数进行盲注&#xff1a; 七、联合注入1、获取当前表的列数2、获取当前数据库名3、…...

【C语言】初阶结构体

&#x1f388;个人主页&#xff1a;库库的里昂 &#x1f390;CSDN新晋作者 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 ✨收录专栏&#xff1a;C语言初阶 ✨其他专栏&#xff1a;代码小游戏 &#x1f91d;希望作者的文章能对你有所帮助&#xff0c;有不足的地方请在评论…...

24届近5年南京理工大学自动化考研院校分析

今天学长给大家带来的是南京理工大学控制考研分析 满满干货&#xff5e;还不快快点赞收藏 一、南京理工大学 ​ 学校简介 南京理工大学是隶属于工业和信息化部的全国重点大学&#xff0c;学校由创建于1953年的新中国军工科技最高学府——中国人民解放军军事工程学院&#xf…...

5.PyCharm基础使用及快捷键

在前几篇文章中介绍了PyCharm的安装和汉化,本篇文章一起来看一下PyCharm的基本用法和一些快捷键的使用方法。 本篇文章PyCharm的版本为PyCharm2023.2 新建项目和运行 打开工具,在菜单中——文件——新建项目 选择项目的创建位置(注意最好不要使用中文路径和中文名项目名称…...

RabbitMQ的安装

RabbitMQ的安装 1、Windows环境下的RabbitMQ安装步骤 使用的版本&#xff1a;otp_win64_23.2 rabbitmq-server-3.8.16 版本说明&#xff1a;https://www.rabbitmq.com/which-erlang.html#compatibility-matrix 1.1 下载并安装erlang RabbitMQ 服务端代码是使用并发式语言…...

GPU版PyTorch对应安装教程

一、正确安装符合自己电脑的对应GPU版本的PyTorch之前需要了解三个基本概念 算力、CUDA driver version、CUDA runtime version ①算力&#xff1a;需要先知道你的显卡&#xff0c;之后根据官网表格进行对应&#xff0c;得到算力 ②CUDA driver version&#xff1a;电脑上显卡…...

医学影像PACS临床信息系统源码

医学影像临床信息系统&#xff08;Picture Archiving and Communication Systems&#xff09;PACS是指从医疗影像设备中获得数字影像&#xff0c;利用高速网络进行存储、管理、传输的医疗影像信息管理系统。通过该系统&#xff0c;能实现影像数字化、无胶片化管理。 登记系统 …...

Python(Web时代)——jinja2模板

简介 Jinja2是Flask框架默认支持的模板引擎&#xff0c;是python的web项目中被广泛应用的一种模板引擎&#xff0c;jinja2的作者与Flask是同一个人。 jinja2具有以下特点&#xff1a; 非常灵活&#xff0c;提供了控制结构、表达式与继承等 性能好 可读性强 渲染一个模板&a…...

酷开系统 | 酷开科技,让数据变得更有价值!

身处信息时代&#xff0c;我们每个人时刻都在生成、传递和应用数据&#xff0c;数据已经成为了现代社会中宝贵的资源之一&#xff0c;而在人工智能领域&#xff0c;数据更是被称为人工智能的“燃料”。 而在AI的发展中&#xff0c;只有拥有高质量、多样性且充分代表性的数据集…...

uni——tab切换

案例展示 案例代码 <view class"tablist"><block v-for"(item,index) in tabList" :key"index"><view class"tabItem" :class"current item.id?active:" click"changeTab(item)">{{item.nam…...

类图的6种关系和golang应用

文章目录 1. 依赖和关联1.1 依赖&#xff08;Dependency&#xff09;概念类图示例代码示例 1.2 关联&#xff08;Association&#xff09;概念类图示例代码示例 2. 组合和聚合&#xff08;特殊的关联关系&#xff09;2.1 聚合&#xff08;Aggregation&#xff09;概念类图示例代…...

Linux tar 备忘清单

tar 备忘清单 语法选项创建一个 tar 格式的压缩文件创建压缩后的 tar.gz 存档文件生成压缩率更高的 tar.bz2 文件解压缩 tar 文件解压缩 tar.gz 文件解压缩 tar.bz2 文件列出归档内容从 tar 归档文件中提取单个文件从 tar 归档文件中提取多个文件使用通配符提取文件组添加文件或…...

76. 最小覆盖子串

题目链接&#xff1a;力扣 解题思路&#xff1a;滑动窗口 因为只需要最小子串中包含t中的所有字符即可&#xff0c;顺序不重要&#xff0c;所以可以先统计一下 t 中每个字符出现的次数&#xff0c;使用map进行统计&#xff1a; key表示t中的字符&#xff0c;value表示字符的个…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

Pydantic + Function Calling的结合

1、Pydantic Pydantic 是一个 Python 库&#xff0c;用于数据验证和设置管理&#xff0c;通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发&#xff08;如 FastAPI&#xff09;、配置管理和数据解析&#xff0c;核心功能包括&#xff1a; 数据验证&#xff1a;通过…...

解析“道作为序位生成器”的核心原理

解析“道作为序位生成器”的核心原理 以下完整展开道函数的零点调控机制&#xff0c;重点解析"道作为序位生成器"的核心原理与实现框架&#xff1a; 一、道函数的零点调控机制 1. 道作为序位生成器 道在认知坐标系$(x_{\text{物}}, y_{\text{意}}, z_{\text{文}}…...

【向量库】Weaviate 搜索与索引技术:从基础概念到性能优化

文章目录 零、概述一、搜索技术分类1. 向量搜索&#xff1a;捕捉语义的智能检索2. 关键字搜索&#xff1a;精确匹配的传统方案3. 混合搜索&#xff1a;语义与精确的双重保障 二、向量检索技术分类1. HNSW索引&#xff1a;大规模数据的高效引擎2. Flat索引&#xff1a;小规模数据…...

C++课设:实现本地留言板系统(支持留言、搜索、标签、加密等)

名人说&#xff1a;路漫漫其修远兮&#xff0c;吾将上下而求索。—— 屈原《离骚》 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 专栏介绍&#xff1a;《编程项目实战》 目录 一、项目功能概览与亮点分析1. 核心功能…...