uniapp - 微信小程序 - 自定义底部tabbar
废话不多说,直接行源码
这里需要的底部tabbar的图片在这里 我的资源里面呢
图片是这样的

先看成品吧

首先 - BaseApp\components\Tabbar.vue
<script setup>import {ref,nextTick,watch} from "vue"// 核心 - 隐藏uniapp自带的底部tabbaruni.hideTabBar()let current = ref(0)const list = ref([{pagePath: "pages/index/index",iconPath: '../static/tab/11.png',selectedIconPath: "../static/tab/1.png",text: "index"}, {pagePath: "pages/warn/index",iconPath: '../static/tab/22.png',selectedIconPath: "../static/tab/2.png",text: "warn"}, {pagePath: "pages/my/index",iconPath: '../static/tab/33.png',selectedIconPath: "../static/tab/3.png",text: "my"}, {pagePath: "pages/user/index",iconPath: '../static/tab/44.png',selectedIconPath: "../static/tab/4.png",text: "user"}, {pagePath: "pages/sign/index",iconPath: '../static/tab/55.png',selectedIconPath: "../static/tab/5.png",text: "sign"}])const changeTab = (e) => {uni.switchTab({url: `/${list.value[e].pagePath}`,})}// const props = defineProps(['current'])const props = defineProps({current: {type: String, // 或者其他你需要的类型 required: true // 如果这个 prop 是必需的 }})console.log('props=', props)current.value = props.current
</script><template><view class="tabbar"><!-- 根据tabbar个数的多少, 调整.tabbar-item样式中的padding即可 --><view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="changeTab(index)"><view class="select" v-if="current == index"><view class="i-t"><image class="img imgactive" mode="widthFix" :src="item.selectedIconPath" v-if="current == index"></image><image class="img" mode="widthFix" :src="item.iconPath" v-else></image><view class="text active" v-if="current == index">{{item.text}}</view><view class="text" v-else>{{item.text}}</view></view></view><view v-else><image class="img" mode="widthFix" :src="item.selectedIconPath" v-if="current == index"></image><image class="img" mode="widthFix" :src="item.iconPath" v-else></image><view class="text active" v-if="current == index">{{item.text}}</view><view class="text" v-else>{{item.text}}</view></view></view></view>
</template><style>.tabbar {/* 1.5vh: 视口高度的1.5% */font-size: 1.5vh;position: fixed;left: 0;bottom: 0;z-index: 99;width: 100%;/* 6vh: 视口高度的6% */height: 6vh;display: flex;align-items: center;justify-content: space-around;background-color: #fff;padding: 20rpx 0;}.tabbar-item {height: 100%;padding: 0 20rpx;/* 根据tabbar个数的多少, 调整.tabbar-item样式中的padding即可 */display: flex;align-items: center;justify-content: center;}.select, {width: 10vh;height: 10vh;/* border-radius: 10vh; *//* margin-bottom: 4vh; *//* background-color: #086d5b; */position: relative;},.i-t {font-size: 1.5vh;padding: 2vw 2vh;position: absolute;bottom: 1vh;}.img ,{height: 3vh;width: 2.5vh;/* 4vw: 视口宽度的4% */margin: 0 4vw;},.imgactive, {height: 3.5vh;width: 3.2vh;margin: 0 2.2vw;}.text {,text-align: center;color: #CACACA;},.text, .active {color: #fff;}
</style>
其次 - pages.json
{"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "index"}}, {"path": "pages/warn/index","style": {"navigationBarTitleText": "告警","enablePullDownRefresh": false}}, {"path": "pages/my/index","style": {"navigationBarTitleText": "我的","enablePullDownRefresh": false}}, {"path": "pages/user/index","style": {"navigationBarTitleText": "其他","enablePullDownRefresh": false}}, {"path": "pages/sign/index","style": {"navigationBarTitleText": "标签","enablePullDownRefresh": false}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},// 主要是这里的:tabbar -------------------------------------------------------"tabBar": {"height": "0",// "color": "#7A7E83",// "selectedColor": "#55ffff",// "backgroundColor": "#55ff7f","list": [{"pagePath": "pages/index/index"},{"pagePath": "pages/warn/index"},{"pagePath": "pages/my/index"},{"pagePath": "pages/user/index"},{"pagePath": "pages/sign/index"}]},"uniIdRouter": {}}
再然后 - 在别的.vue组件中这样使用
BaseApp\pages\my.vue
<template><text class="title">{{title}}</text><tabbar :current='2'></tabbar>
</template><script setup>import {ref} from 'vue'import tabbar from '../../components/Tabbar.vue'let title = ref('我的')
</script><style></style>相关文章:
uniapp - 微信小程序 - 自定义底部tabbar
废话不多说,直接行源码 这里需要的底部tabbar的图片在这里 我的资源里面呢 图片是这样的 先看成品吧 首先 - BaseApp\components\Tabbar.vue <script setup>import {ref,nextTick,watch} from "vue"// 核心 - 隐藏uniapp自带的底部tabbaruni.hi…...
每日一题——Python实现PAT乙级1030 完美数列(举一反三+思想解读+逐步优化)五千字好文
一个认为一切根源都是“自己不够强”的INTJ 个人主页:用哲学编程-CSDN博客专栏:每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 初次尝试 再次尝试 代码结构 时间复杂度分析 空间复杂度分析 总结 我要更强 时…...
【C/C++】this指针的概念和作用
目录 一、this指针的概念 二、this指针的作用 2.1 访问当前对象的成员 2.2 返回对象本身 2.3 区分对象 2.4 在构造函数和析构函数中 2.5 在类的内部调用其他成员函数 2.6 作为参数传递 三、this指针使用 3.1 this指针的使用 3.2 C++ 中this指针使用 一、this…...
Spring Bean 的生命周期
在 Spring 框架中,Bean 的生命周期由 Spring 容器管理,从创建到销毁,Spring 提供了多种方式来定制 Bean 的初始化和销毁过程。本文将详细介绍 Spring Bean 的生命周期,包括 Bean 的初始化和销毁、自定义初始化方法和销毁方法。 一…...
锐起RDV5高性能云桌面
锐起是上海锐起信息技术有限公司旗下品牌。该公司创立于 2001 年,是桌面虚拟化产品和解决方案提供商,专注于桌面管理系统和私有云存储系统的系列软件产品研发,致力于简化 IT 管理、增强系统安全,提供简单、易用、稳定、安全的产品…...
pandas减少dataframe占用内存的若干方法
一、只获取文件需要的列,避免加载整个文件 举例:只获取A.B两列数据 df pd.read_csv(123.csv, usecols[A, B]) 二、使用更准确的数据类型,减少内存空间占用 import pandas as pd import numpy as np # 假设你的CSV文件有三列࿰…...
Ubuntu20.04 64位 安装docker(有问题可评论沟通交流)
1、查看系统版本 cat /proc/version 2、卸载可能存在或未安装成功的docker(新系统无需操作) apt-get remove docker docker-engine docker-ce docker.io 3、更新apt-get apt-get update 4、安装软件包允许apt-get通过 HTTPS 使用存储库 apt-get install …...
【C++PCL】点云处理Kd树和八叉树区别
作者:迅卓科技 简介:本人从事过多项点云项目,并且负责的项目均已得到好评! 公众号:迅卓科技,一个可以让您可以学习点云的好地方 重点:每个模块都有参数如何调试的讲解,即调试某个参数对结果的影响是什么,大家有问题可以评论哈,如果文章有错误的地方,欢迎来指出错误的…...
makefile学习过程
makefile 完美教程 - WittXie - 博客园 (cnblogs.com) Makefile教程(绝对经典,所有问题看这一篇足够了)-CSDN博客 Makefile入门(超详细一文读懂)-CSDN博客 最实用的Makefile教程 真的很简单(搞不明白网上的教程写那么复杂干嘛&…...
Kompas AI数据分析与预测功能对比
一、引言 在现代商业环境中,数据分析与预测是企业制定战略决策的关键工具。通过对大量数据的分析,企业能够识别趋势、预测未来变化,并做出更为明智的决策。本文将对比Kompas AI与其他主要AI产品在数据分析与预测方面的能力,展示K…...
Appium+python自动化(二十五)- 那些让人抓耳挠腮、揪头发和掉头发的事 - 获取控件ID(超详解)
简介 在前边的第二十二篇文章里,已经分享了通过获取控件的坐标点来获取点击事件的所需要的点击位置,那么还有没有其他方法来获取控件点击事件所需要的点击位置呢?答案是:Yes!因为在不同的大小屏幕的手机上获取控件的坐…...
【博士每天一篇文献-算法】Fearnet Brain-inspired model for incremental learning
阅读时间:2023-12-16 1 介绍 年份:2017 作者:Ronald Kemker,美国太空部队;Christopher Kanan,罗切斯特大学 期刊: arXiv preprint 引用量:520 Kemker R, Kanan C. Fearnet: Brain-…...
Appium+python自动化(二十六)- 烟花一瞬,昙花一现 -Toast提示(超详解)
简介 今天宏哥在这里首先给小伙伴们和童鞋们分享一个有关昙花的小典故:话说昙花原是一位花神,她每天都开花,四季都灿烂。她还爱上了每天给她浇水除草的年轻人。后来,此事给玉帝得知。于是,玉帝大发雷霆,要…...
大数据之路 读书笔记 Day1
大数据之路 读书笔记 Day1 阿里巴巴大数据系统体系架构图 1. 数据采集层 #mermaid-svg-YqqD2w3qV6jc2aGP {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-YqqD2w3qV6jc2aGP .error-icon{fill:#552222;}#mermaid-sv…...
吴恩达揭秘:编程Agent如何革新软件开发行业
作为 AI 领域的杰出人物,吴恩达教授对编程 Agent 的兴起表示了极大的兴趣。他认为,编程 Agent 有潜力通过自动执行繁琐的任务、提高代码质量和加速开发周期来彻底改变软件开发行业。 本文将深入探讨吴恩达对编程 Agent 的见解, 多代理系统质…...
Study--Oracle-04-SQL练习
一、SQL语句思维导图 二、SQL练习 -- 以employee_id 为排序,列出前5个人 -- FETCH select employee_id,first_name from employees order by employee_id FETCH FIRST 5 rows only; -- 以employee_id 为排序,从第6个人开始 到第10个人 -- offset …...
目前音质最好的麦克风是哪款,一文读懂无线麦克风推荐哪些品牌好
在自媒体时代,无线领夹麦克风成为自媒体人不可或缺的助手。它帮助我们在各种环境中保持清晰声音,提升创作效率与作品质量。然而,面对众多无线麦克风产品,挑选一款性价比高、性能卓越的款式却成为难题。今天,我将分享…...
Python笔记 异常、模块与包
一、了解异常 异常的概念 什么是异常 当检测到一个错误时,Python解释器就无法继续执行了,反而出现了一些错误的提示,这就是所谓的“异常”,也就是我们常说的BUG。 二、异常的捕获 1.知道为什么要捕获异常 世界上没有完美的程…...
spark查看日志
Logger 当 Spark 任务已经提交到集群运行后,可以通过以下几种方式查看LoggerFactory输出的日志: Web 界面:在 Spark 任务运行时,可以通过访问 Spark 的 Web UI 来查看日志。通常,可以在浏览器中输入http://<drive…...
【LeetCode】每日一题:LRU缓存
请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类: LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存 int get(int key) 如果关键字 key 存在于缓存中,则返回关键字的值,否则返回 -1 …...
synchronized 学习
学习源: https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖,也要考虑性能问题(场景) 2.常见面试问题: sync出…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容:参考网站: PID算法控制 PID即:Proportional(比例)、Integral(积分&…...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...
条件运算符
C中的三目运算符(也称条件运算符,英文:ternary operator)是一种简洁的条件选择语句,语法如下: 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true,则整个表达式的结果为“表达式1”…...
django filter 统计数量 按属性去重
在Django中,如果你想要根据某个属性对查询集进行去重并统计数量,你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求: 方法1:使用annotate()和Count 假设你有一个模型Item,并且你想…...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户,但你不希望用 root 权限运行 ns-3(这是对的,ns3 工具会拒绝 root),你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案:创建非 roo…...
Nginx server_name 配置说明
Nginx 是一个高性能的反向代理和负载均衡服务器,其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机(Virtual Host)。 1. 简介 Nginx 使用 server_name 指令来确定…...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上,所以报错,到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本,cu、torch、cp 的版本一定要对…...
根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:
根据万维钢精英日课6的内容,使用AI(2025)可以参考以下方法: 四个洞见 模型已经比人聪明:以ChatGPT o3为代表的AI非常强大,能运用高级理论解释道理、引用最新学术论文,生成对顶尖科学家都有用的…...
【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制
使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下,限制某个 IP 的访问频率是非常重要的,可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案,使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...
