uniapp中scrollview配合swiper实现一个简单的tab标签页

<template><view class="tab-container"><!-- Tab 标签滚动容器 --><scroll-view scroll-x="true" class="tab-scroll" scroll-with-animation="true"><view class="tab-list"><viewv-for="(item, index) in tabs":key="index"class="tab-item":class="{ active: currentIndex === index }"@click="changeTab(index)">{{ item.name }}</view></view></scroll-view><!-- 内容区域 --><swiper:current="currentIndex"class="swiper-content"@change="onSwiperChange":duration="300"scroll-x="true"><swiper-item v-for="(item, index) in tabs" :key="index"><view class="swiper-item-content"><!-- 内容区域的具体内容 --><view>{{ item.name }} Content</view></view></swiper-item></swiper></view>
</template>
<script lang="ts">
import { ref } from 'vue';export default {setup() {const tabs = ref([{ name: 'Tab 1' },{ name: 'Tab 2' },{ name: 'Tab 3' },{ name: 'Tab 4' },// { name: 'Tab 5' },// { name: 'Tab 6' },// { name: 'Tab 7' },// { name: 'Tab 8' },// { name: 'Tab 9' },// ... 更多 Tab]);const currentIndex = ref(0);const changeTab = (index: number) => {currentIndex.value = index;};const onSwiperChange = (e: any) => {currentIndex.value = e.detail.current;};return {tabs,currentIndex,changeTab,onSwiperChange,};},
};
</script>
<style>
.tab-container {width: 100%;
}.tab-scroll {white-space: nowrap;overflow-x: auto;
}.tab-list {display: flex;
}.tab-item {padding: 10px 20px;cursor: pointer;position: relative;
}.tab-item.active {color: #f10606;
}.swiper-content {height: 300px; /* 设置内容区域的高度 */
}.swiper-item-content {width: 100%;height: 100%;box-sizing: border-box;padding: 20px;
}
.active::after {content: '';position: absolute;/* background-image: url(../../static/checkDetails/action.png); */background-size: 100%;background: #f00;background-repeat: no-repeat;width: 40px;height: 4px;top: 38px;left: 30px;
}
</style>

基本思路

1横向滚动的动画效果主要依靠scrollview自带的croll-with-animation="true"来设置

2 而底部下划线则是给当前激活的tab设置伪元素来实现

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

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

相关文章

线程的生命周期及状态转换

线程的生命周期指的是从创建到结束的整个过程&#xff0c;包括线程的创建、运行、阻塞、唤醒、等待、终止等状态。在不同的编程语言和操作系统中&#xff0c;线程的状态和状态转换可能略有不同&#xff0c;但基本的概念是相似的。以下是线程生命周期中常见的状态及其转换&#…

后端-mybatis的一对一查询

准备两张表菜单表和分类表&#xff0c;一个菜单对应一个分类&#xff0c;一个分类对应多个菜单&#xff0c;我们从菜单对分类来操作一对一的关系&#xff0c;首先在菜单表里面要有一个分类表的id字段。 使用mapper的映射文件.xml来写的话我们在resource目录下创建各自mapper的…

量化交易系统开发-实时行情自动化交易-8.量化交易服务平台(一)

19年创业做过一年的量化交易但没有成功&#xff0c;作为交易系统的开发人员积累了一些经验&#xff0c;最近想重新研究交易系统&#xff0c;一边整理一边写出来一些思考供大家参考&#xff0c;也希望跟做量化的朋友有更多的交流和合作。 接下来会对于收集整理的33个量化交易服…

mysql_题库详解

1、如何创建和删除数据库&#xff1f; 1&#xff09;创建数据库 CREATE DATABASE 数据库名; 2&#xff09;删除数据库 drop database 数据库名; 2、MyISAM与InnoDB的区别&#xff1f; 1&#xff09;事务&#xff1a;MyISAM 不支持事务 InnoDB 支持 2&#xff09;行锁/表锁&a…

修改Docker 默认存储目录( Docker Root Dir: /var/lib/docker)

Docker 默认将所有的数据&#xff08;包括镜像、容器、卷等&#xff09;存储在 /var/lib/docker 目录下。这个目录默认被配置在系统的根分区或者较小的分区上。随着容器化应用的增加&#xff0c;或者 Docker 容器和镜像的数量增加&#xff0c;默认存储位置可能会迅速填满&#…

CentOS startx 启动失败的解决方法

第一个错误&#xff1a;MESA-LOADER: failed to open mgag200: /usr/lib64/dri/mgag200_dri.so: cannot open shared object file: No such file or directory (search paths /usr/lib64/dri) failed to load driver: mgag200 解决方法&#xff1a;安装缺失mesa驱动&#xff0…

week 9 - Entity-Relationship Modelling

一、数据库设计的重要性 • 设计数据库可使查询更高效、简洁。 • 减少数据冗余&#xff08;data redundancy&#xff09;&#xff0c;提升表的整洁性。 二、Key Components of ER Modelling 实体-关系建模的基本构成 1. 实体&#xff08;Entity&#xff09;&#xff1a;表…

BUUCTF—Reverse—Java逆向解密(10)

程序员小张不小心弄丢了加密文件用的秘钥&#xff0c;已知还好小张曾经编写了一个秘钥验证算法&#xff0c;聪明的你能帮小张找到秘钥吗&#xff1f; 注意&#xff1a;得到的 flag 请包上 flag{} 提交 需要用专门的Java反编译软件:jd-gui 下载文件&#xff0c;发现是个class文…

图卷积网络GCN与图注意力网络GAT原理详解

文章目录 1. Why 图卷积网络GCN&#xff1f;2. GCN的原理2.1 GCN的输入2.2 GCN的核心公式2.3 GCN 的核心公式推导的直观理解 3. Why 图注意力网络GAT&#xff1f;4. GAT的原理4.1 GAT的输入4.2 GAT的流程及核心公式 References 1. Why 图卷积网络GCN&#xff1f; GCN(Graph Co…

ELK Fleet JAVA LOG收集与展示教程

目录 elastic-fleet架构 Elastic Agent的优势 Fleet JAVA日志收集流程 1.注册Fleet Sever 2.创建JAVA代理收集策略Agent Policy 3.添加集成 integration 4.调整Java log输出格式 5.添加Elastic Agent 6.添加Ingest 7.创建数据视图 8.其他Policy nginx-policy syst…

电脑提示报错“Directx error”怎么解决?是什么原因导致的?游戏软件提示“Directx error”错误的解决方案

DirectX Error&#xff08;DX错误&#xff09;通常指的是在使用基于DirectX技术的应用程序&#xff08;尤其是游戏&#xff09;时遇到的问题。这个问题可能由多种因素导致&#xff0c;以下是一些可能的原因及相应的解决方案&#xff1a; 可能的原因 DirectX版本不匹配&#x…

Go语言技巧:快速统一字符串中的换行符,解决跨平台问题

统一字符串中的 Windows \r\n 换行符 — Go语言实现 在编程中&#xff0c;尤其是处理跨平台的文本数据时&#xff0c;换行符的处理是一个常见的问题。Windows 系统使用 \r\n 作为换行符&#xff0c;而 Unix-like 系统&#xff08;如 Linux 和 macOS&#xff09;使用 \n。在 Go…

jmeter 压测常用静默参数解释应用

简介&#xff1a; JMeter静默压测&#xff08;即无界面压测&#xff09;是一种常用的性能测试方法&#xff0c;用于模拟多个用户同时访问系统并测量系统的响应时间和吞吐量等关键性能指标。在JMeter静默压测中&#xff0c;常用的压测参数及其解释如下&#xff1a; 一、基本…

自动驾驶目标检测融合全貌

1、early fusion 早期融合&#xff0c;特点用到几何空间转换3d到2d或者2d到3d的转换&#xff0c;用像素找点云或者用点云找像素。 2、deep fusion 深度融合&#xff0c;也是特征级别融合&#xff0c;也叫多模态融合&#xff0c;如bevfusion范式 3、late fusion 晚融合&#x…

OpenAI Whisper 语音识别 模型部署及接口封装

环境配置: 一、安装依赖&#xff1a; pip install -U openai-whisper 或者&#xff0c;以下命令会从这个存储库拉取并安装最新的提交&#xff0c;以及其Python依赖项&#xff1a; pip install githttps://github.com/openai/whisper.git 二、安装ffmpeg&#xff1a; cd …

⽂件操作详解

⽬录 一 文件操作的引入 1 为什么使⽤⽂件&#xff1f; 2 什么是⽂件&#xff1f; 3 文件分类&#xff08;1 从⽂件功能的⻆度来分类&#xff1a;程序⽂件/数据⽂件 2根据数据的组织形式&#xff1a;为⽂本⽂件/⼆进制⽂件&#xff09; 二 ⽂件的打开和关闭 1 …

GPT(Generative Pre-trained Transformer) 和 Transformer的比较

GPT&#xff08;Generative Pre-trained Transformer&#xff09; 和 Transformer 的比较 flyfish 1. Transformer 是一种模型架构 Transformer 是一种通用的神经网络架构&#xff0c;由 Vaswani 等人在论文 “Attention Is All You Need”&#xff08;2017&#xff09;中提…

Qt 项目中同时使用 CMAKE_AUTOUIC 和 UiTools 的注意事项

在 Qt 项目开发中&#xff0c;.ui 文件是界面设计的重要组成部分。开发者可以通过两种主要方式使用 .ui 文件&#xff1a; 编译期处理&#xff1a;通过 Qt 的 uic 工具将 .ui 文件转化为 C 代码&#xff08;ui_xxx.h&#xff09;&#xff0c;静态绑定到项目中。运行时动态加载…

gitee:解决vs文件权限被拒问题

报错问题 分析原因 git上传要忽略vs文件&#xff0c; Git因致命错误而失败。权限被拒绝 无法处理的路径。 解决方法 1、项目根目录下->右击空白->Open Git Bash here 2、 创建.gitignore文件 命令 touch .gitignore 3、 文件开头输入 .vs保存 参考地址 VS2017 Git fa…

【03】Selenium+Python 八种定位元素方法

操作元素&#xff0c;需要先查找定位到对应的元素。 查找单个元素&#xff1a;driver.find_element() 返回是一个web element 对象 查找多个元素&#xff1a;driver.find_elements() 返回是一个list对象 By 是 Selenium 中一个非常重要的类&#xff0c;用于定位网页元素。 使…