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 …...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令,并忽略错误 rm somefile…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...
R语言AI模型部署方案:精准离线运行详解
R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
MongoDB学习和应用(高效的非关系型数据库)
一丶 MongoDB简介 对于社交类软件的功能,我们需要对它的功能特点进行分析: 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具: mysql:关系型数据库&am…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 (忘了有没有这步了 估计有) 刷机程序 和 镜像 就不提供了。要刷的时…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表,若其中包含环,则输出环的入口节点。 若其中不包含环,则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
从零实现STL哈希容器:unordered_map/unordered_set封装详解
本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说,直接开始吧! 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...
PL0语法,分析器实现!
简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...
JS设计模式(4):观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中,我们经常会遇到这样的场景:一个对象的状态变化需要自动通知其他对象,比如: 电商平台中,商品库存变化时需要通知所有订阅该商品的用户;新闻网站中࿰…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...
