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

uniapp - 简单版本自定义tab栏切换

tab切换是APP开发最常见的功能之一,uniapp中提供了多种形式的tab组件供我们使用。对于简单的页面而言,使用tabbar组件非常方便快捷,可以快速实现底部导航栏的效果。对于比较复杂的页面,我们可以使用tab组件自由定义样式和内容

目录

一、实现思路

二、实现步骤

①view部分展示

 ②JavaScript 内容

③css中样式展示

三、效果展示


 

        Uniapp作为一款跨平台的开发工具,提供了一种简便的制作tabbar滑动切换的方法。本文将介绍UniAPP如何实现tabbar滑动切换,并带有详细的示例代码。

一、实现思路

        在tabbar的页面中,当用户进行左右滑动时,能够自动切换到相应的页面。这个过程可以通过Uniapp中的swiper组件实现也可以通过自定义完成,代码非常简单。这里我使用的是原生态开发。

        如果想要使用组件开发,可以参考Tabs 标签 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架

二、实现步骤
①view部分展示
  1. 首先,在项目中找到tabbar的页面,在template中添加以下代码
  2.  template v-for可以不用写在template模板 
		<view class="welltab"><!-- tab选项 --><view class="flex-around" style="border-bottom: 1px solid #E6E6E8;"><view v-for="(item, index) in topList" :key="index":class="[item.default ? 'screen-item-avtive' : 'screen-item']" @click="changeTabs(item)">{{ item.name}}</view></view><!-- 列表 --><view v-for="(item, index) in list" class="flex-between acctab" :key="index"><view class="flex-colomn"><view style="color: #333; font-size: 28rpx;font-weight: bold;">{{ item.content }}</view><view style="color: #888;font-size: 24rpx; margin-top: 10rpx;">{{ item.time }}</view></view><view class=""><view v-if="status == 0"><text style="font-size: 30rpx; font-weight: bold;">{{ $tools.getUnit(item.price) }}</text></view><view v-if="status == 1"><text style="font-size: 30rpx; font-weight: bold;">+{{ $tools.getUnit(item.price) }}</text></view><view v-if="status == 2"><text style="font-size: 30rpx; font-weight: bold;">-{{ $tools.getUnit(item.price) }}</text></view></view></view></view>
 ②JavaScript 内容

        1.toplist表示的是tab顶部的内容

        2.list中展示的是跳转后的内容

<script>export default {data() {return {status: '', // 状态list: [{id: 1,price: 123,content: '需求任务',time: '2024-09-09 19:00'}, {id: 1,price: 300,content: '跑腿订单',time: '2024-09-09 19:00'}
],//展示tab款的内容topList: [{name: '全部',default: true,// default: false,id: 0}, {name: '收入',default: false,// default: true,id: 1}, {name: '支出',default: false,// default: true,id: 2},]}},methods: {//点击tab跳转changeTabs(item) {let obj = this.topList.find(v => v.default)if (obj) {obj.default = falseitem.default = true}this.status = item.id// 	this.getRequestList()},}}
</script>
③css中样式展示
  1. tab顶部文字的样式,文字点击时的样式
<style>/* 点击文字的颜色 */.screen-item-avtive {position: relative;font-size: 28rpx;font-family: PingFang SC, PingFang SC;font-weight: bold;color: #428AF6;letter-spacing: 2rpx;padding: 24rpx 0;}/* 本来展示的颜色 */.screen-item {font-size: 28rpx;font-family: PingFang SC, PingFang SC;color: #333;letter-spacing: 2rpx;padding: 24rpx 0;}/* 点击的底部线条颜色 */.screen-item-avtive::after {content: '';position: absolute;left: 50%;bottom: 0;height: 4rpx;background-color: #428AF6;width: 50%;transform: translateX(-50%);border-radius: 4rpx;// transition: all .5s linear;animation: change 1s linear;}/* 底部变化 */@keyframes change {0% {width: 50%;}50% {width: 100%;}100% {width: 50%;}}
</style>
三、效果展示

        

 

 

          

相关文章:

uniapp - 简单版本自定义tab栏切换

tab切换是APP开发最常见的功能之一&#xff0c;uniapp中提供了多种形式的tab组件供我们使用。对于简单的页面而言&#xff0c;使用tabbar组件非常方便快捷&#xff0c;可以快速实现底部导航栏的效果。对于比较复杂的页面&#xff0c;我们可以使用tab组件自由定义样式和内容 目录…...

工作中常用的RabbitMQ实践

目录 1.前置知识 准备工作 2.导入依赖 3.生产者 4.消费者 5.验证 验证Direct 验证Fanout 验证Topic 1.前置知识 rabbitmq有五种工作模式&#xff1b;按照有无交换机分为两大类 无交换机的&#xff1a;简单队列(一对一,单生产单消费)、工作队列(工作队列有轮训分发和公…...

程序员常用英文单词

英语对于程序员来说多么重要应该无需过多解释了&#xff0c;把近期在网上收集到的分享到这里供大家学习交流。 PS&#xff1a;感谢原作者的收集&#xff0c;谢谢。 A abstract 抽象的 abstract base class (ABC) 抽象基类abstract class 抽象类 abstraction 抽象、抽象物、抽象…...

QStringListModel 是 Qt 框架中用于在模型-视图(Model-View)架构中展示字符串列表的类

QStringListModel 是 Qt 框架中用于在模型-视图&#xff08;Model-View&#xff09;架构中展示字符串列表的类。 QStringListModel 继承自 QAbstractListModel&#xff0c;是一个基于字符串列表的数据模型。它提供了一种方便的方式来将字符串列表作为数据源&#xff0c;供各种…...

vue使用echarts显示中国地图

项目引入echarts以后&#xff0c;在页面创建canvas标签 引入一个公共js文件&#xff08;下面这段代码就是china.js文件&#xff09; (function (root, factory) {if (typeof define function && define.amd) {// AMD. Register as an anonymous module.define([ex…...

ATM的转账

【 1 】明确我们要实现的功能 # 用户功能菜单 # 1.注册 # 2.登陆 # 3.取款 # 4.转账 # 5.充值余额 # 6.查看流水 # 7.查看银行信息(查看自己…...

在Windows 10或11中,复制和粘贴不起作用,不一定是键盘的问题

以下建议将帮助你解决复制和粘贴无法正常工作的问题。 以下提示主要适用于Windows 10和Windows 11,但也可能解决旧版本Windows上的复制和粘贴问题。 为什么我的复制粘贴不起作用 复制和粘贴不起作用的问题可能以以下方式之一出现。 其他正在运行的应用程序或进程可能会使用…...

git 使用记录

远程仓库为空初始化 初始化本地仓库 git init 在本地仓库书写代码&#xff08;这里可以编辑一个文本文件做测试&#xff0c;如hello.txt&#xff09; 5&#xff09;执行&#xff1a;git add 要让git管理的文件&#xff08;git add hello.txt&#xff09;>执行完此操作将我…...

支持大模型训练的计算机系统

摘要&#xff1a; 训练数据决定了基础大模型可用的理论信息&#xff0c;模型架构和训练目标决定了可以提取多少信息&#xff0c;计算机系统决定了实际可实现的内容。在数据和模型大小方面&#xff0c;系统是扩展的关键瓶颈&#xff0c;这两者似乎都可以可靠地跟踪能力的改进。在…...

SAP ABAP-AVL-OO方法中的ALV的如何自己添加按钮及其响应

ABAP-AVL-OO方法中的ALV的如何自己添加按钮及其响应 SAP在做报表开发中&#xff0c;不同公司对报表的风格往往各异&#xff0c;为此经常在使用OO方法做ALV报表中需要去掉自带的工具栏而自行添加一些工具按钮&#xff0c;下面将简单介绍一下添加按钮及如何响应的实现方法&#…...

uniapp移动端悬浮按钮(吸附边缘)

Uniapp移动端悬浮按钮可以通过CSS实现吸附边缘的效果。具体实现步骤如下&#xff1a; html&#xff1a; <movable-area class"movable-area"><movable-view class"movable-view" :position"position" :x"x" :y"y"…...

【成功】Linux安装Mysql8并设置远程连接

今天在新搞来的阿里云的服务器里安装MySQL8&#xff0c;记录一下过程&#xff1a; 这是MySQL的官网和下载地址&#xff1a;MySQL :: Download MySQL Community Server (Archived Versions) 1. 先进入安装目录 cd /usr/local 2. 安装 wget https://downloads.mysql.com/arch…...

高效纯化树脂A-2313 CPR

在化工、制药等行业中&#xff0c;对colorful chemicals的纯化一直是挑战。本文将为您介绍一款具有卓越性能的强碱性阴离子交换树脂——Tulsion A-2313 CPR。通过分析其特性和应用&#xff0c;展示其在colorful chemicals纯化领域的优势。 一、Tulsion A-2313 CPR离子交换树脂的…...

uni-app实现安卓原生态调用身份证阅读器读卡库读身份证和社保卡、银行卡、IC卡等功能

DONSEE系列多功能读写器Android Uniapp API接口规范V1.0.0 本项目Uniapp调用了身份证读卡器的库文件&#xff1a;DonseeDeviceLib-debug.aar&#xff0c;该库放到nativeplugins\donsee-card\android&#xff0c;然后会自动加载。SDK会自动检查是否拥有USB设备权限&#xff0c;…...

【QT】QComboBox和QPlainTextEdit基本介绍和应用示例

目录 1.QComboBox 1.1 QComboBox概述 1.2 QComboBox信号 1.3 QComboBox常用功能 1.4 QComboBox添加简单项 1.6 QComboBox列表项的访问 2.QPlainTextEdit 2.1 QPlainTextEdit概述 2.2 QPlainTextEdit的基本属性 2.3 QPlainTextEdit的公共函数 2.4 QPlainTextEdit的公…...

Path的使用-path绘制折线的时候带上圆角

场景&#xff1a; 使用antv-g6 自定义边的时候&#xff0c;绘制折线&#xff0c;此时都是直角&#xff0c;需要加圆角&#xff0c;没找到属性&#xff0c;自己绘制&#xff1a; 最后使用了A&#xff08;elliptical Arc&#xff09;弧形 A命令用于画弧形。 A rx ry x-axis-r…...

Go Fyne 入门

Fyne是一个用于创建原生应用程序的UI工具包&#xff0c;它简单易用&#xff0c;并且支持跨平台。以下是一个简单的Fyne教程&#xff0c;帮助你入门&#xff1a; 1. 安装Fyne 首先&#xff0c;确保你已经安装了Go语言。然后&#xff0c;在终端中运行以下命令来安装Fyne&#x…...

如何为游戏角色3D模型设置纹理贴图

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 当谈到游戏角色的3D模型风格时&#xff0c;有几种不同的风格&#xf…...

2024 年 SEO 现状

搜索引擎优化&#xff08;SEO&#xff09;一直以来都是网络知名度和成功的基石。随着我们踏上 2024 年的征程&#xff0c;SEO领域正在经历重大变革&#xff0c;有些变革已经开始&#xff0c;这对企业、创作者和营销人员来说既是挑战也是机遇。 语音搜索 语音搜索曾是一个未来…...

Mac虚拟机CrossOver23破解版下载和许可证下载

CrossOver Mac Mac 和 Windows 系统之间的兼容工具。使 Mac 操作系统的用户可以运行 Windows 系统的应用&#xff0c;从办公软件、实用工具、游戏到设计软件&#xff0c; 您都可以在 Mac 程序和 Windows 程序之间随意切换。 系统要求 运行macOS的基于Intel或Apple Silicon 的…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

uniapp 开发ios, xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

AI语音助手的Python实现

引言 语音助手(如小爱同学、Siri)通过语音识别、自然语言处理(NLP)和语音合成技术,为用户提供直观、高效的交互体验。随着人工智能的普及,Python开发者可以利用开源库和AI模型,快速构建自定义语音助手。本文由浅入深,详细介绍如何使用Python开发AI语音助手,涵盖基础功…...

离线语音识别方案分析

随着人工智能技术的不断发展&#xff0c;语音识别技术也得到了广泛的应用&#xff0c;从智能家居到车载系统&#xff0c;语音识别正在改变我们与设备的交互方式。尤其是离线语音识别&#xff0c;由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力&#xff0c;广…...