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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/31721.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华为新版ENSP PRO模拟器测评:性能表现与功能扩展一览

一、引言 在网络领域不断涌现的新技术和复杂的网络拓扑要求&#xff0c;推动了网络设备模拟器的持续发展和创新。华为作为一家领先的通信技术解决方案提供商&#xff0c;不断致力于为网络工程师和技术从业人员提供更优秀的仿真环境。最近&#xff0c;华为推出了ensp pro模拟器的…

Vue+SpringBoot项目开发:后台登陆功能的实现(二)

写在开始:一个搬砖程序员的随缘记录文章目录 一、SpringBoot项目的搭建二、数据库配置1、新建数据库2、新建用户表 三、SpringBoot项目的配置 一、SpringBoot项目的搭建 项目搭建传送门&#xff1a;从零开始&#xff0c;SpringBoot项目快速搭建 二、数据库配置 1、新建数据库…

通过Easy Excel导入数据

目录 &#x1f351;一、背景&#x1f351;二、开发验证&#x1f34a;2.1、引入easyexcel依赖&#x1f34a;2.2、创建表及基础代码&#x1f34a;2.3、处理类及接口&#x1f353;2.3.1、EasyExcel监听处理器&#x1f353;2.3.2、Controller接口&#x1f353;2.3.3、service调用监…

字节跳动推出公共DNS服务,将支持 DoH/DoT/DoQ 等协议

近日&#xff0c;字节跳动旗下的火山引擎正式上线 TrafficRoute 解析调度套件&#xff0c;其实质就是一套“公共 DNS”服务&#xff0c;目前仅支持免费版。该 DNS 后续将提供 DoH、DoT 和 DoQ 加密 DNS 查询协议。 火山引擎公共解析&#xff08;PublicDNS&#xff09;产品介绍&…

LeetCode算法递归类—验证二叉搜索树

目录 98. 验证二叉搜索树 题解&#xff1a; 代码&#xff1a; 运行结果&#xff1a;​编辑 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左子树只包含 小于 当前节点的数。节点的右子树只包含…

Android Animation Made Easy

原文链接 Android Animation Made Easy 动画在任何一个GUI系统中都是一个非常重要的设计元素&#xff0c;它可以让交互变得优雅&#xff0c;让界面变得炫酷&#xff0c;让操作变得更加的舒畅&#xff0c;让状态过渡变得更加的顺滑&#xff0c;对视觉效果有极大的提升&#xff…

LeetCode热题100第49题----题目分享

给你一个字符串数组&#xff0c;请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 两个字符串互为字母异位词&#xff0c;当且仅当两个字符串包含的字母相同。同一组字母异位词中的字符串具备相同点&a…

Android Retrofit 源码分析

一、retrofit 是什么&#xff1f; Retrofit 是一个 RESTful 的 HTTP 网络请求框架的封装。 网络请求的工作本质上是 OkHttp 完成&#xff0c;而 Retrofit 仅负责 网络请求接口的封装。 1&#xff09;App应用程序通过 Retrofit 请求网络&#xff0c;实际上是使用 Retrofit 接口…

小红书投放流程是什么,达人选择注意事项!

很多人会发现有些笔记的内容并不是很出彩&#xff0c;但是偏偏就火了&#xff0c;自己想去模仿就平平无奇&#xff0c;其中包含了很多因素&#xff0c;有运气、也有选题和博主发文思路在里面&#xff0c;今天&#xff0c;来和大家分享下小红书投放流程是什么&#xff0c;达人选…

K8s环境下监控告警平台搭建及配置

Promethues是可以单机搭建的&#xff0c;参考prometheus入门[1] 本文是就PromethuesGrafana在K8s环境下的搭建及配置 Prometheus度量指标监控平台简介 启动minikube minikube start 安装helm 使用Helm Chart 安装 Prometheus Operator: helm install prometheus-operator stabl…

flask-migrate使用

1.介绍 # 表,字段发生变化&#xff0c;都会有记录&#xff0c;自动同步到数据库中--》django支持这种操作 # 原生的sqlalchemy&#xff0c;不支持修改表的 # flask-migrate可以实现类似于django的 python manage.py makemigrations #记录 python manage.py migrate …

本地跑Mapreduce程序的相关配置

本地跑MapReduce程序需要配置的代码 为了在本地运行MapReduce程序&#xff0c;需要加如下的东西 在项目中创建一个如图所示的包&#xff1a;org.apache.hadoop.io.nativeio&#xff0c;并在该包下面创建一个名为&#xff1a;NativeIO的类&#xff08;注意&#xff1a;名字不能…

C++BUG记录:文件无法创建,文件路径正确但使用了Format

问题1&#xff1a;xx.Format()不存在与参数列表匹配的重载函数 问题&#xff1a;文件的路径名字是通过Format转换组合而成的&#xff0c;会报错“FileName.Format()不存在与参数列表匹配的重载函数”。 FileName.Format("%s%d", FilePath, num);//报错&#xff1a;…

Yum 部署K8S集群

目录 1、准备环境 &#xff08;温馨提示&#xff1a;尽量一次完成集群&#xff09; 2.安装master节点 3、安装k8s-master上的node 4、安装配置k8s-node1节点 5、安装k8s-node2节点 6、为所有node节点配置flannel网络 7、配置docker开启加载防火墙规则允许转发数据 一. 环…

黑马程序员Vue全套视频

Vue 2 创建vue实例 示例: <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><script src"https://cdn.jsdelivr.net/npm/vue2.…

液体神经网络:LNN是个啥概念?

一、说明 在在人工智能领域&#xff0c;神经网络已被证明是解决复杂问题的非常强大的工具。多年来&#xff0c;研究人员不断寻求创新方法来提高其性能并扩展其能力。其中一种方法是液体神经网络&#xff08;LNN&#xff09;的概念&#xff0c;这是一个利用动态计算功能的迷人框…

Field Symbol与数据引用的几个应用

这俩货都是指针。在动态编程里用。 但是从好理解的角度来看&#xff0c;都给他们理解成数据对象。 都得指向其他的数据对象。不过field symbol指的是其他的数据对象内存地址的值。而数据引用只是指向内存地址。 1.Field symbol 当Field Symbol指向了其他的数据对象&#xf…

【实操干货】如何开始用Qt Widgets编程?(二)

Qt 是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写&#xff0c;所有平台无差别运行&#xff0c;更提供了几乎所有开发过程中需要用到的工具。如今&#xff0c;Qt已被运用于超过70个行业、数千家企业&#xff0c;支持数百万设备及应用。 在本文中&#xff0…

解决: git拉取报错 git 未能顺利结束 (退出码 1)

拉取代码失败信息 解决方法: 执行一下"git push -f origin master"命令即可 步骤: 1.项目文件夹右击选择"Git Bash Here",打开命令窗口 2. 输入"git push -f origin master"后,回画 执行结束 3.再拉取代码,成功

VB+SQL房地产评估系统设计与实现

摘 要 房地产评估系统对房地产评估信息进行全面现代化管理。但一直以来人们使用传统人工的方式进行评估,这种管理方式存在着许多缺点,如:效率低、计算量大,容易出错。另外时间一长,将产生大量的文件和数据,这对于查找、更新和维护都带来了不少的困难。 随着科学技术的不断…