当前位置: 首页 > 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表示字符的个…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

抽象类和接口(全)

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画!!!

目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...

ArcGIS Pro+ArcGIS给你的地图加上北回归线!

今天来看ArcGIS Pro和ArcGIS中如何给制作的中国地图或者其他大范围地图加上北回归线。 我们将在ArcGIS Pro和ArcGIS中一同介绍。 1 ArcGIS Pro中设置北回归线 1、在ArcGIS Pro中初步设置好经纬格网等&#xff0c;设置经线、纬线都以10间隔显示。 2、需要插入背会归线&#xf…...