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

vue3+uniapp自定义tabbar

首先把tabbar中的元素写在一个list中用v-for进行渲染
用一个interface进行定义接口,这样别人在review你的代码就可以清晰知道你的tabbar包含什么元素。
利用typescript特性进行类型定义,可以省去很多麻烦

import { reactive } from "vue"
import { Images } from "src/static/images"
export interface Tabbar {iconPath: string,selectedIconPath: string,text: string,url: string
}export const tabBarList = reactive<Tabbar[]>([{iconPath: Images.Home,selectedIconPath: Images.HomeActive,text: '首页',url: '/pages/home/home',},{iconPath: Images.Personal,selectedIconPath: Images.PersonalActive,text: '我的',url: '/pages/personal/personal',}
])
<template><view class="tabbar-container"><view v-for="(item, index) in tabBarList" :key="index" :url="item.url" :class="{ 'active': activeIndex === index }"><view class="icon-container" @click="switchTab(index)"><view class="icon"><image class="icon-image" :src="activeIndex === index ? item.selectedIconPath : item.iconPath" /></view><view class="text">{{ item.text }}</view></view></view></view>
</template>

渲染好之后,tabbar有个点击跳转页面,以及点亮图标
点亮图标,这边的currentPath一定注意格式,打印出getCurrentPages()[0].route就会发现它是pages/personal/personal,而不是/pages/personal/personal

//vue
<view class="icon"><image class="icon-image" :src="activeIndex === index ? item.selectedIconPath : item.iconPath" /></view>//jsconst currentPath =  "/" + getCurrentPages()[0].route;
tabBarList.forEach((item, index) => {if (item.url === currentPath) {store.activeIndex = index;uni.switchTab({url: item.url,})}
})

跳转:由于是page页面,因此必须用switchtab方法而不能用nacigatorTo;这边的index及页面序号必须存储在pinia库中,否则界面一刷新它就不变了。

function switchTab(index) {if (index === store.activeIndex) {return}store.setActiveIndex(index)uni.switchTab({url: tabBarList[index].url})
}
import { defineStore } from 'pinia'interface State {activeIndex: number;sceneId: number;isLogin: boolean;nickname: string;avatar: string
}export const useTabbarStore = defineStore('store', {state: (): State => {return { activeIndex: 0,isLogin: false,sceneId: 1,nickname: '立即登录',avatar: 'https://bestwellai-aigo.oss-cn-shanghai.aliyuncs.com/icon/personal/personal_avatar.svg' }},actions: {setActiveIndex(index) {this.activeIndex = index;},setUsername(nickname,avatar){this.nickname = nickname;this.avatar = avatar;},setSceneId(sceneId) {this.sceneId = sceneId;}},
})

完成效果:自定义的效果就是样式可以自己写,非常方便;以及一个小程序需要三四种形式的tabbar时可以这样操作。
在这里插入图片描述

相关文章:

vue3+uniapp自定义tabbar

首先把tabbar中的元素写在一个list中用v-for进行渲染 用一个interface进行定义接口&#xff0c;这样别人在review你的代码就可以清晰知道你的tabbar包含什么元素。 利用typescript特性进行类型定义&#xff0c;可以省去很多麻烦 import { reactive } from "vue" imp…...

stable diffusion webui 安装

安装环境:cuda10.2-cudnn8-devel-ubuntu18.04 torchtorchvision:[pytorch]pytorch官方安装法_torch1.13.1cu117_FL1623863129的博客-CSDN博客 error&#xff1a;RuntimeError: Couldnt determine Stable Diffusions hash: 69ae4b35e0a0f6ee1af8bb9a5d0016ccb27e36dc. 解决方法…...

csdn文章编辑器必备语法备用

前言 本文是为了记录csdn文章编辑器的必备语法&#xff0c;为写作小白提供更详细的写作规范技巧 csdn的质量分查询地址&#xff1a;质量分查询 这里的跳转链接&#xff0c;可以使用ctrlshift L 来输入链接 亦可以使用 链接: link. &#x1f680;&#x1f680;&#x1f680; &a…...

机器学习鲁棒性笔记

鲁棒性&#xff08;Robustness&#xff09;在统计学和数据分析中是一个重要的概念。它指的是某个统计方法或模型对于异常值或偏离数据集正常分布的情况的敏感程度。一个鲁棒性较好的方法能够在存在异常值或数据分布不符合假设的情况下依然给出可靠的结果&#xff0c;而不会被极…...

ubuntu 有 1 个软件包没有被完全安装或卸载

ubuntu 有 1 个软件包没有被完全安装或卸载&#xff0c;安装时出现问题&#xff0c;一直卡在 rti-connext-dds-5.3.1 安装问题上。 下面是我安装 sqlite3 出现的问题&#xff1a; sukaiG7-7500:~/1/111/workspace_ros_car_noetic$ sudo apt-get install sqlite3 正在读取软件…...

【QT调用ST-link-使用QT编写程序-调用ST-LINK_CLI.exe-烧写STM32F4xxx-基础样例】

【QT结合ST-link&#xff0c;使用QT编写程序&#xff0c;调用ST-LINK_CLI.exe,烧写STM32F4xxx-基础样例】 1、前言2、实验环境3、先前了解-自我总结4、实验过程&#xff08;0&#xff09;硬件连接与供电&#xff08;1&#xff09;安装&使用STM32 ST-LINK Utility&#xff0…...

高并发下的Java项目解决方案

高并发下的Java项目解决方案 在当今的互联网时代&#xff0c;高并发是Java项目在设计和开发过程中必须要考虑的重要因素之一。本文将详细介绍如何在Java项目中处理高并发的问题&#xff0c;并提供具体的解决方案。我们将主要讨论四个主要的主题&#xff1a;服务器扩展&#xf…...

华为推出手机系统云翻新服务:什么是云翻新?如何使用?

华为手机系统云翻新是华为推出的一项功能&#xff0c;旨在通过云服务提供系统翻新的服务。它可以帮助用户对手机的系统进行优化和更新&#xff0c;以提高手机的性能和流畅度。具体而言&#xff0c;华为手机系统云翻新功能提供了免费的云空间&#xff0c;用户可以将手机中的系统…...

修改时间和创建时间的设计问题

记录一次 在django框架开发中遇到问题&#xff1a; 想要的逻辑&#xff1a; 当在保存数据时&#xff0c;create_time字段只会在新建数据时被设置为当前时间&#xff0c;并且之后不会再修改&#xff0c;而modify_time字段在每次保存数据时都会被设置为当前时间也可以为空&…...

CentOS 搭建 Harbor 镜像仓库(图文详解)

本文目录 1. 下载 Harbor 安装包2. 解压3. 修改配置文件4. 安装 Harbor5. 修改 docker 配置6. docker 登录方式7. 访问 Harbor Web 界面8. 创建证书9. 生成证书10. 更新配置11. 网页登录 说明&#xff1a;在搭建 Harbor 镜像仓库之前&#xff0c;虚拟机要先安装 docker 和 dock…...

【云原生】k8s组件架构介绍与K8s最新版部署

个人主页&#xff1a;征服bug-CSDN博客 kubernetes专栏&#xff1a;kubernetes_征服bug的博客-CSDN博客 目录 1 集群组件 1.1 控制平面组件&#xff08;Control Plane Components&#xff09; 1.2 Node 组件 1.3 插件 (Addons) 2 集群架构详细 3 集群搭建[重点] 3.1 mi…...

你真的了解什么是生成式AI吗?

最近正好有这样的机会&#xff0c;让我给一群非技术人士介绍生成式AI&#xff0c;忙忙碌碌了一阵子&#xff0c;结果发现受众还是未能理解什么是生成式AI&#xff0c;到底和之前的AI有什么区别。因此希望此篇能够帮助普通人真正理解生成式AI&#xff0c;有个直观印象。 人工智…...

Linux--高级IO

高级IO 1. 五种IO模型 阻塞IO&#xff1a;在内核将数据准备好之前&#xff0c;系统调用会一直等待。 所有的套接字&#xff0c;默认都是阻塞方式。阻塞IO是最常见的IO模型。 非阻塞IO&#xff1a;如果内核还未将数据准备好&#xff0c;系统调用仍然会直接返回&#xff0c;并…...

【C# 基础精讲】C# 开发环境搭建(Visual Studio等)

安装C#开发环境是开始学习和使用C#编程的第一步。目前&#xff0c;最常用的C#开发环境是Microsoft Visual Studio&#xff0c;它是一套强大的集成开发环境&#xff08;IDE&#xff09;&#xff0c;提供了丰富的工具和功能&#xff0c;使开发C#应用程序变得更加便捷。以下是安装…...

谷粒商城第九天-解决商品品牌问题以及前后端使用检验框架检验参数

目录 一、总述 二、商品分类问题 三、前端检验 四、后端检验 五、总结 一、总述 在完成完商品分类的时候&#xff0c;后来测试的时候还是发现了一些问题&#xff0c;现在将其进行解决&#xff0c;问题如下&#xff1a; 1. 取消显示的时候&#xff0c;如果取消了显示&…...

Java8函数式接口

在工作中我需要&#xff0c;我需要递归处理复杂嵌套的JSON字符串&#xff0c;然后处理方法有多种&#xff0c;为了代码通用性&#xff0c;我想要把处理方法当作参数&#xff0c;传入到函数中&#xff0c;然后根据不同的处理方法处理字符串。通过查资料得知&#xff0c;可以使用…...

.Net6 Web Core API --- Autofac -- AOP

目录 一、AOP 封装 二、类拦截 案例 三、接口拦截器 案例 AOP拦截器 可开启 类拦截器 和 接口拦截器 类拦截器 --- 只有方法标注 virtual 标识才会启动 接口拦截器 --- 所有实现接口的方法都会启动 一、AOP 封装 // 在 Program.cs 配置 builder.AddAOPExt();//自定义 A…...

RocketMQ基本概念和高级原理

基础概念 消息模型 RocketMQ 主要由 Producer、Broker、Consumer 三部分组成&#xff0c;其中 Producer 负责生产消息&#xff0c;Consumer 负责消费消息&#xff0c;Broker 负责存储消息。Broker 在实际部署过程中对应一台服务器&#xff0c;每个 Broker 可以存储多个 Topic…...

小白到运维工程师自学之路 第六十六集 (docker 网络模型)

一、概述 Docker网络模型是指Docker容器在网络中的通信方式和组织结构。Docker容器通过网络连接&#xff0c;使得容器之间可以相互通信&#xff0c;并与主机和外部网络进行交互。 在Docker中&#xff0c;有几种不同的网络模型可供选择&#xff1a; 1、主机模式&#xff08;H…...

Go和Java实现建造者模式

Go和Java实现建造者模式 下面通过一个构造人身体不同部位的案例来说明构造者模式的使用。 1、建造者模式 建造者模式使用多个简单的对象一步一步构建成一个复杂的对象。这种类型的设计模式属于创建型模式&#xff0c;它提供了 一种创建对象的最佳方式。 一个 Builder 类会…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

android13 app的触摸问题定位分析流程

一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...