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

UniApp 实现炫酷导航栏：选中图标上移并隐藏文字

news 来源：原创 2025/3/16 19:10:39

在移动应用开发中，导航栏是用户与应用交互的重要组成部分，一个美观且交互性强的导航栏能大大提升用户体验。本文将详细介绍如何使用 UniApp 实现一个独特的导航栏，当用户选中某个导航项时，对应的图标会上移并隐藏文字，下面我们就来一步步剖析这个实现过程。

实现效果概述

我们要实现的导航栏固定在页面底部，包含多个导航项，每个导航项由图标和文字组成。当用户点击某个导航项时，该导航项的图标会上移一定距离，同时文字隐藏，给用户带来流畅且有趣的交互体验。

模板部分（template）

<template><!-- 导航栏容器 --><view class="tab-bar"><!-- 循环渲染导航栏项 --><view class="tab-bar-item" :class="{ 'active': currentIndex === index }" v-for="(item, index) in tabBarList" :key="index" @click="handleTabClick(index)"><!-- 图标容器 --><view class="icon-container"><!-- 根据选中状态显示不同图标 --><image :src="currentIndex === index ? item.activeIcon : item.icon" mode="aspectFit"></image></view><!-- 文字容器，根据选中状态决定是否显示 --><view class="text-container" :style="{ display: currentIndex === index ? 'none' : 'block' }">{{ item.text }}</view></view></view>
</template>

脚本部分（script）

<script>
export default {data() {return {// 当前选中的导航栏项索引currentIndex: 0,// 导航栏数据列表tabBarList: [{// 引用 static 文件夹下的未选中图标icon: '/static/logo/index.png', // 引用 static 文件夹下的选中图标activeIcon: '/static/logo/index-s.png', text: '首页'},{icon: '/static/logo/fen.png',activeIcon: '/static/logo/fen-s.png',text: '分类'},{icon: '/static/logo/my.png',activeIcon: '/static/logo/my-s.png',text: '我的'}]};},methods: {// 处理导航栏项点击事件handleTabClick(index) {this.currentIndex = index;}}
};
</script>

样式部分（style）

<style scoped>
.tab-bar {display: flex;justify-content: space-around;align-items: center;position: fixed;bottom: 0;left: 0;right: 0;height: 50px;background-color: #fff;border-top: 1px solid #eee;
}.tab-bar-item {display: flex;flex-direction: column;align-items: center;justify-content: center;width: 80px;transition: all 0.3s;
}.tab-bar-item.active .icon-container {transform: translateY(-10px); /* 图标上移 10px */
}.icon-container {width: 24px;height: 24px;transition: transform 0.3s;
}.icon-container image {width: 100%;height: 100%;
}.text-container {font-size: 12px;color: #666;margin-top: 2px;
}
</style>

总结

通过以上的代码实现，我们成功地使用 UniApp 打造了一个具有独特交互效果的导航栏。这种选中图标上移并隐藏文字的设计，不仅增加了导航栏的视觉吸引力，还提升了用户与应用的交互体验。开发者可以根据实际需求调整图标、文字和动画效果，让导航栏更符合项目的整体风格。希望本文对你在 UniApp 开发中实现类似的导航栏有所帮助。

你可以根据实际情况对上述内容进行修改和完善，同时可以在 CSDN 博客中添加代码块高亮、图片展示等功能，让文章更加丰富和易读。

最后，祝大家元宵节快乐

UniApp 实现炫酷导航栏：选中图标上移并隐藏文字

在移动应用开发中，导航栏是用户与应用交互的重要组成部分，一个美观且交互性强的导航栏能大大提升用户体验。本文将详细介绍如何使用 UniApp 实现一个独特的导航栏，当用户选中某个导航项时，对应的图标会上移并隐藏文字，…...

编程日记 2025/3/16 19:10:39

Django 操作表中的数据（增删改查）

1.新建数据我之前已经在数据库中创建了两张表，如下在urls.py文件中添加一行代码，然后再在views.py文件中编写函数 （将 URL 路径 orm/ 映射到 Django 视图函数 views.orm，当用户访问 orm/ 时，Django 会调用 orm 视图…...

编程日记 2025/3/16 3:49:18

优选驾考小程序

第2章　系统分析 2.1系统使用相关技术分析 2.1.1Java语言介绍 Java语言是一种分布式的简单的开发语言，有很好的特征，在安全方面、性能方面等。非常适合在Internet环境中使用，也是目前企业级运用中最常用的一个编程语言，具有很大…...

编程日记 2025/3/16 0:44:36

vue开发06：前端通过webpack配置代理处理跨域问题

1.定义在浏览器尝试请求不同源（域名、协议、端口号不同）的资源时，浏览器的同源策略会阻止这种跨域请求。（比如前端端口15500，后端端口5050，前端界面不可以直接调用5050端口） 2.解决方案使用前…...

编程日记 2025/3/14 1:07:14

C++基础 | 线程`std::thread`

什么是std::thread？ std::thread是C11中引入的一个类，用于表示和管理线程。通过std::thread，我们可以创建一个新的线程来执行指定的任务。线程是操作系统调度的基本单位，多个线程可以并发执行，从而提高程序的效率。创…...

编程日记 2025/3/12 18:16:47

体验 DeepSeek-R1：解密 1.5B、7B、8B 版本的强大性能与应用

文章目录 🍋引言🍋DeepSeek 模型简介🍋版本更新：1.5B、7B、8B 的区别与特点🍋模型评估🍋体验 DeepSeek 的过程🍋总结 🍋引言随着大规模语言模型的持续发展，许多模型在性…...

编程日记 2025/3/15 9:18:50

2024年认证杯SPSSPRO杯数学建模A题(第二阶段)保暖纤维的保暖能力全过程文档及程序

2024年认证杯SPSSPRO杯数学建模 A题保暖纤维的保暖能力原题再现： 冬装最重要的作用是保暖，也就是阻挡温暖的人体与寒冷环境之间的热量传递。人们在不同款式的棉衣中会填充保暖材料，从古已有之的棉花、羽绒到近年来各种各样的人造纤维。不…...

编程日记 2025/3/14 6:04:45

P1878 舞蹈课（详解）c++

题目链接：P1878 舞蹈课 - 洛谷 | 计算机科学教育新生态 1.题目解析 1：我们可以发现任意两个相邻的都是异性，所以他们的舞蹈技术差值我们都要考虑，4和2的差值是2，2和4的差值是2，4和3的差值是1，根…...

编程日记 2025/3/15 9:27:23

或非门组成的SR锁存器真值表相关问题

PS：主要是给大家抛砖引玉，不喜勿喷。问题描述：或非门组成的SR锁存器，为什么当SD和RD等于0时候的真值表一个是Q0，Q0.一个结果是Q1，Q1？...

编程日记 2025/3/5 3:29:27

机器学习算法 - 随机森林之决策树初探（1）

随机森林是基于集体智慧的一个机器学习算法，也是目前最好的机器学习算法之一。随机森林实际是一堆决策树的组合（正如其名，树多了就是森林了）。在用于分类一个新变量时，相关的检测数据提交给构建好的每个分类树。每个…...

编程日记 2025/3/16 0:59:53

webpack构建流程

文章目录 [TOC](文章目录) 运行流程初始化流程编译构建流程compile编译make 编译模块build module 完成模块编译输出流程seal输出资源emit输出完成小结运行流程是一个串行的过程，它的工作流程就是将各个插件串联起来在运行过程中会广播事件，插件只…...

编程日记 2025/3/11 9:08:12

服务器之连接简介（Detailed Explanation of Server Connection）

一台服务器最大能支持多少连接？一台客户端机器最多能发起多少条连接？？ 我们知道TCP连接，从根本上看其实就是client和server端在内存中维护的一组【socket内核对象】（这里也对应着TCP四元组：源IP、源端口、…...

编程日记 2025/3/11 7:09:04

第1章大型互联网公司的基础架构——1.5 服务发现

讲到这里，我们已经对一个客户端请求进入业务HTTP服务的过程有了较为详细的了解。业务HTTP服务在处理请求的过程中免不了与其他下游服务通信——可能会调用其他业务服务，可能需要访问数据库，可能会向消息中间件投递消息等，所以业务…...

编程日记 2025/3/17 0:08:08

uniapp PDF 预览和下载

创建 index.vue <template><view><view class"box"><view class"item" ><view class"title"><span></span><text>文件</text></view><view class"list" v-for"(…...

编程日记 2025/3/16 22:53:21

ubuntu服务器部署

关闭欢迎消息服务器安装好 ubuntu 系统后，进行终端登录，会显示出很多的欢迎消息通过在用户的根目录下执行 touch .hushlogin 命令，再次登录终端就不会出现欢迎消息修改hostname显示修改 /etc/hostname 文件内容为主机名，保…...

编程日记 2025/3/14 0:20:56

Deepseek 本地部署

准备环境设备：家用笔记本电脑，8核/16G/1Tb SSD/无独显系统：windows10 软件环境（非源码部署不需要）：conda 4.8.5、python3.7、git2.13 步骤下载安装Ollama 下载地址：OllamaGet up and r…...

编程日记 2025/3/4 5:02:05

[Linux][问题处理]修改密码报You must wait longer to change your password

一、问题描述在Linux控制台中修改密码，键入旧密码，设置并确认新密码后，却提示You must wait longer to change your password（您必须等待更长时间才能更改密码） 二、原因当前修改时间 < Minimum number of da…...

编程日记 2025/3/14 0:42:36

《刚刚问世》系列初窥篇-Java+Playwright自动化测试-22- 操作鼠标拖拽 - 下篇（详细教程）

1.简介上一篇中，宏哥说的宏哥在最后提到网站的反爬虫机制，那么宏哥在自己本地做一个网页，没有那个反爬虫的机制，谷歌浏览器是不是就可以验证成功了，宏哥就想验证一下自己想法，其次有人私信宏哥说是有那种…...

编程日记 2025/3/15 7:03:57

SpringBoot3使用Swagger3

版本 springboot3.4.2 JAVA 17 一、引入Swagger3依赖 <dependency><groupId>org.springdoc</groupId><artifactId>springdoc-openapi-starter-webmvc-ui</artifactId><version>2.0.4</version> </dependency> 二、快速启…...

编程日记 2025/3/15 7:04:20

HCIA综合项目之多技术的综合应用实验

十五 HCIA综合实验 15.1 IP规划 #内网分配网段192.168.1.0 24#内网包括骨干链路和两个用户网段，素以需要划分三个，借两位就够用了192.168.1.0 26--骨干192.168.1.64 26---R1下网络192.168.1.128 26---R2下网络192.168.1.192 26--备用192.168.1.64 26--…...

编程日记 2025/3/9 14:44:34

燕千云ITSM已支持DeepSeek对接！AI能力持续升级

春节期间，DeepSeek火爆全网，引发热议，作为国产AI大模型的黑马，DeepSeek凭借独特的训练方法、先进的模型架构和强大的联网推理能力，正不断拓展AI技术的应用边界。其“快思考”能力，可在极短时间内完成复杂决…...

编程日记 2025/3/16 0:44:18

Windows 自动主题：Windows AutoTheme

Windows 自动主题：Windows AutoTheme 链接：https://pan.xunlei.com/s/VOJ2ZG5t8QjL7_fGVIBgyxJQA1?pwdgbie# 自动切换：根据日出、日落时间自动切换 Windows 主题模式。高效轻量：使用 Rust 提供高效的系统调用，保证运…...

编程日记 2025/3/15 9:32:07

自定义Spring Cloud Gateway过滤器：记录慢请求

在构建微服务架构时，API网关是一个关键组件，它负责路由、负载均衡、安全验证等多种功能。Spring Cloud Gateway提供了强大的扩展能力，允许开发者通过自定义过滤器来增强其功能。本文将详细介绍如何实现一个自定义过滤器，用于记录响…...

编程日记 2025/3/17 2:17:57

python 浅拷贝和深拷贝

浅拷贝（Shallow Copy）语法示例代码 1示例代码 2 深拷贝（Deep Copy）语法示例代码浅拷贝与深拷贝的区别示例：浅拷贝与深拷贝的对比浅拷贝：只复制外层容器，内层嵌套对象仍然是共享的，…...

编程日记 2025/3/12 23:05:03

uni-app 学习（一）

一、环境搭建和运行 （一）创建项目直接进行创建 （二）项目结构理解 pages 是页面静态资源打包文件，看我们想输出成什么格式 app.vue 页面的入口文件 main.js 是项目的入口文件存放对打包文件的配置 pages 存放整…...

编程日记 2025/3/13 15:20:27

unity学习37：新版的动画器：动画状态机 Animator

目录 1 给游戏物体添加，新版的动画器 Animator 2 关于 Animator 3 创建动画器的控制器 Animator Controller 4 打开动画编辑器 Animator 5 动画编辑器还是Animation 5.1 创建新的动画 5.2 创建第2个动画 5.3 测试2个动画均可用 6 再次打开动画编辑器 A…...

编程日记 2025/3/16 17:37:45

参考链接 https://blog.csdn.net/qq_26611129/article/details/98732561 https://www.cnblogs.com/Azion/p/17756274.html https://avmedia.0voice.com/?id49050 https://blog.csdn.net/qq_44825209/article/details/133760652 https://www.cnblogs.com/Azion/p/17525955.htm…...

编程日记 2025/3/13 14:21:06

Vue3实现优雅的前端版本更新提示

背景在前端项目开发中,当我们发布了新版本后,需要及时通知用户刷新页面以获取最新代码。本文将介绍一种优雅的实现方案。实现原理在项目根目录维护一个version.json文件,记录当前版本号前端定期请求version.json检查版本对比本地存储的版本号,如有更新则提示用户核心代…...

编程日记 2025/3/10 21:42:22

vim常用快捷键

正常模式在打开文件进入 Vim 后，默认处于正常模式，该模式下的快捷键主要用于光标移动、文本操作等。光标移动基本移动：h（左移）、j（下移）、k（上移）、l（右移…...

编程日记 2025/3/12 4:21:17

P1226 【模板】快速幂

P1226 【模板】快速幂题目描述给你三个整数 a , b , p a,b,p a,b,p，求 a b m o d p a^b \bmod p abmodp。输入格式输入只有一行三个整数，分别代表 a , b , p a,b,p a,b,p。输出格式输出一行一个字符串 a^b mod ps，其中 a , b…...

编程日记 2025/3/15 7:50:14

【gRPC-gateway】是否有拦截器的情况添加健康检查的细节，与多路复用runtime.NewServeMux和gRPC区别讲解，与跨域功能，go案例

健康检查详解什么是健康检查？ 健康检查（Health Checking）是一种机制，用于监控服务的状态，确保服务在运行时是健康的、可用的。通过健康检查，系统可以自动检测服务是否正常工作，并在出现问题时…...

编程日记 2025/3/14 3:37:45

vue开发时，用localStorage常用方法及存储数组方法。

localStorage 可以让你在浏览器中存储键值对，并且在页面关闭后数据依然保留。localStorage 中存储的数据会一直保存在客户端，直到被手动删除或者清除浏览器缓存。 localStorage 中存储的数据在同一浏览器的不同窗口之间是共享的，而 sessionSt…...

编程日记 2025/3/15 1:55:33

HashMap详解+简单手写实现（哈希表）

1. 什么是 HashMap？ HashMap是Java集合框架中的一种数据结构，它实现了Map接口，用于存储键值对（Key-Value Pair）。HashMap允许null键和null值，并且不保证元素的顺序。 --- 2. HashMap 的工作原理 2.1 内…...

编程日记 2025/3/16 2:36:03

解决Did not find dashscope_api_key问题——jupyter设置环境变量

jupyter中使用通义千文langchain 报错 Value error, Did not find dashscope_api_key, please add an environment variable DASHSCOPE_API_KEY which contains it, or pass dashscope_api_key as a named parameter.我本来以为这样就是已经加上了： #导入相关包 i…...

编程日记 2025/3/14 19:25:20

尚硅谷爬虫note003

一、函数 1. 函数的定义 def 函数名（）： 代码 2.函数的调用函数名（） 3. 定义参数（不调用函数不执行） def sum（a，b） #形参 c a b print（c&…...

编程日记 2025/3/13 13:53:59

算法兵法全略（译文）

目录始计篇谋攻篇军形篇兵势篇虚实篇军争篇九变篇行军篇地形篇九地篇火攻篇用间篇始计篇算法，在当今时代，犹如国家关键的战略武器，也是处理各类事务的核心枢纽。算法的世界神秘且变化万千，不够贤能聪慧…...

编程日记 2025/3/17 1:27:10

NO.17十六届蓝桥杯备战|do-while循环|break和continue语句|三道练习(C++)

do-while循环 do-while语法形式在循环语句中 do while 语句的使⽤最少，它的语法如下： //形式1 do 语句; while( 表达式 );//形式2 do { 语句1; 语句2; ... } while( 表达式 );while 和 for 这两种循环都是先判断，条件如果…...

编程日记 2025/3/11 20:22:43

【广州大学主办，发表有保障 | IEEE出版，稳定EI检索，往届见刊后快至1个月检索】第二届电气技术与自动化工程国际学术会议 (ETAE 2025)

第二届电气技术与自动化工程国际学术会议 (ETAE 2025) The 2nd International Conference on Electrical Technology and Automation Engineering 大会官网：http://www.icetae.com/【更多详情】会议时间：2025年4月25-27日会议地点&#xff1a…...

编程日记 2025/3/10 5:00:51

Spring Cache 详细讲解

Spring Cache 是 Spring 框架提供的缓存抽象层，通过统一的 API 和注解简化缓存操作，支持多种缓存实现（如 Redis、EhCache、Caffeine 等）。其核心目标是减少重复计算，提升系统性能，同时保持代码简洁性。 1. …...

编程日记 2025/3/13 18:57:38

CPT205 计算机图形学 OpenGL 3D实践（CW2）

文章目录 1. 介绍2. 设计3. 准备阶段4. 角色构建5. 场景构建6. 交互部分6.1 键盘交互6.2 鼠标交互6.3 鼠标点击出多级菜单进行交互 7. 缺点与问题7.1 程序bug7.2 游戏乐趣不足7.3 画面不够好看 8. 完整代码 1. 介绍前面已经分享过了关于CPT205的CW1的2D作业，这次C…...

编程日记 2025/3/14 18:57:21

Netty的基本架构详解

EventLoopGroup基本认识我们需要了解的 EventLoopGroup, Netty对EventLoopGroup做了很多的扩展实现，下图是他的家族图谱： 我们上一节课使用的案例，使用的是NioEventLoopGroup，他是NIO的实现，可以看出来他是Multithre…...

编程日记 2025/3/10 7:18:44

2025前端面试题超全面解析（附答案与深度扩展）

文章目录一、HTML篇（扩展版）1. **HTML5语义化标签的实际应用场景**2. **Web Components实战：如何封装一个自定义按钮组件？**3. **Web Worker的用途与限制** 二、CSS篇（扩展版）1. **CSS盒模型详解&#xff…...

编程日记 2025/3/15 1:46:38

自己搭建可以和deepseek对话的WEB应用

第一步下载安装anaconda，地址：https://repo.anaconda.com/ 第二步打开anaconda客户端，打开conda命令行窗口第三步创建一个open-webui专属的python专属的虚拟环境，并且指定python具体的版本 conda create --name open…...

编程日记 2025/3/16 22:35:52

Linux系统运行模式和链接

一、系统运行模式 centos6 0 关机模式 1 单用户模式 2 字符模式，无网络连接 3 字符模式 4 预留 5 图形模式 6 重启模式查看系统当前处于的运行模式切换为图形模式 init 5 centos7 字符模式 multi-user…...

编程日记 2025/3/13 7:21:21

.NET 9.0 的 Blazor Web App 项目，进度条＜progress＞组件使用注意事项

一、执行过程中，要刷新进度条的显示，需要延时、释放，否则进度条不实时更新，最后一下到 100% // 延时，释放给前端：【必须】，否则进度条不实时更新，最后一下到 100await Task.D…...

编程日记 2025/3/16 14:14:40

头歌实验--面向对象程序设计

目录实验五类的继承与派生第1关：简易商品系统任务描述答案代码第2关：公司支出计算任务描述答案代码第3关：棱柱体问题任务描述答案代码实验五类的继承与派生第1关：简易商品系统任务描述答案代码 #incl…...

编程日记 2025/3/11 18:39:01

IoTDB 断电后无法启动 DataNode，日志提示 Meet error while starting up

问题 IoTDB 1.3.2 版本，断电后 IoTDB 的 DataNode 无法启动，日志如下： 2024-12-16 14:45:41,350 [main] ERROR o.a.i.db.service.DataNode:562 - Meet error while starting up. org.apache.iotdb.commons.exception.StartupException: Fo…...

编程日记 2025/3/16 6:13:04

2024华为OD机试真题-最大报酬(C++)-E卷B卷-100分

2024华为OD机试最新题库-(C卷+D卷+E卷)-(JAVA、Python、C++) 目录题目描述输入描述输出描述示例一解题思路考点代码 c++ 题目描述小明每周上班都会拿到自己的工作清单，工作清单内包含n项工作，每项工作都有对应的耗时时间（单位h）和报酬, 工作的总报酬为…...

编程日记 2025/3/14 12:38:37

jenkins war Windows安装

Windows安装Jenkins 需求1.下载jenkins.war2.编写快速运行脚本3.启动Jenkins4.Jenkins使用需求 1.支持在Windows下便捷运行Jenkins； 2.支持自定义启动参数； 3.有快速运行的脚步样板。 1.下载jenkins.war Jenkins下载地址：https://get.j…...

编程日记 2025/3/13 23:20:27

HCIA项目实践--RIP相关原理知识面试问题总结回答

9.4 RIP 9.4.1 补充概念什么是邻居？ 邻居指的是在网络拓扑结构中与某一节点（如路由器）直接相连的其他节点。它们之间可以直接进行通信和数据交互，能互相交换路由信息等，以实现网络中的数据转发和路径选择等功能。&am…...

编程日记 2025/3/16 5:41:13

实现效果概述

总结

相关文章：