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

小程序配置文件 —— 14 全局配置 - tabbar配置

news 2025/5/30 12:47:27

全局配置 - tabBar配置

tabBar 字段：定义小程序顶部、底部 tab 栏，用以实现页面之间的快速切换；可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面；

在这里插入图片描述
在上面图中，标注了一些 tabBar 常用的配置项：

  • borderStyle：用来控制 tab 栏上方的一条边线，控制边线是否需要进行演示或者隐藏；
  • backgroundColor：用来配置整条 tab 栏的背景色；
  • selectedColor：用来配置 tabBar 被激活时对应的文字颜色；
  • color：用来配置 tabBar 没有被激活时文字的颜色；
  • list：list 是一个数组，数组中每一项都是一个对象，在对象中可以配置 selectedIconPath、pagePath、iconPath、text；selectedIconPath 表示当对应的 tabBar 被激活时对应 icon 的路径，pagePath 表示当对应的 tabBar 被激活时需要跳转的页面路径，iconPath 用来配置当前 tabBar 没有被激活时对应 icon 的路径，text 用来定义每个 tabBar 对应的文字是什么；

注意事项：tab 按数组的顺序排序。list 配置最少配置 2 个，最多 5 个；可以通过官方文档：tabBar 配置项来学习进行相关配置；

打开微信开发者工具，选择根目录下的 app.json 文件，由于 tabBar 主要用于页面间的切换，这里我们现在 pages 字段中创建好对应的页面信息：
在这里插入图片描述
app.json 中的 tabBar 字段和 pages 字段是同级的，所以在 app.json 中添加这个字段：

"tabBar": {"selectedColor": "#f3514f","color": "#666","borderStyle":"black","position": "bottom","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "/assets/tabbar/index.png","selectedIconPath": "/assets/tabbar/index-active.png"},{"pagePath": "pages/cate/cate","text": "分类","iconPath": "/assets/tabbar/cate.png","selectedIconPath": "/assets/tabbar/cate-active.png"},{"pagePath": "pages/cart/cart","text": "购物车","iconPath": "/assets/tabbar/cart.png","selectedIconPath": "/assets/tabbar/cart-active.png"},{"pagePath": "pages/profile/profile","text": "我的","iconPath": "/assets/tabbar/profile.png","selectedIconPath": "/assets/tabbar/profile-active.png"}]}

这里 tabbar 需要使用一些图片资源，可以从 GitCode 中下载相关图片资源（图片资源来自尚硅谷，侵权删除，无意冒犯），下载后的图片资源放置在根目录的 assets 文件夹中，路径地址为 ./assets/tabbar/，具体如下：

在这里插入图片描述

参考视频：尚硅谷微信小程序开发教程

相关文章：

小程序配置文件 —— 14 全局配置 - tabbar配置

全局配置 - tabBar配置 tabBar 字段：定义小程序顶部、底部 tab 栏，用以实现页面之间的快速切换；可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面； 在上面图中，标注了一些 tabBar …...

编程日记 2024/12/30 11:36:28

Redis-十大数据类型

Reids数据类型指的是value的类型，key都是字符串 redis-server:启动redis服务 redis-cli:进入redis交互式终端 常用的key的操作 redis的命令和参数不区分大小写 ，key和value区分 1、查看当前库所有的key keys * 2、判断某个key是否存在 exists key 3、查…...

编程日记 2024/12/30 11:35:27

linux系统编程（七）管道和FIFO

1、管道 使用系统调用pipe可以创建一个新管道&#xff1a; #include <unistd.h> int pipe(int filedes[2]);成功的pipe调用会在数组filedes中返回两个打开的文件描述符&#xff0c;读取端为filedes[0]&#xff0c;写入端为filedes[1]。我们可以使用read/write系统调用在…...

编程日记 2024/12/30 11:34:26

【vLLM大模型TPS测试三部曲】

安装 pip install vllm模型自行下载 例如: https://modelscope.cn/models/jackle/Qwen2.5-Coder-32B-GPTQ-Int4/ 部署测试 export VLLM_MODELQwen2.5-Coder-32B-GPTQ-Int4 # 启动 python3 -m vllm.entrypoints.openai.api_server --model $VLLM_MODEL --deviceauto --enf…...

编程日记 2024/12/30 11:32:24

Elasticsearch：使用 Ollama 和 Go 开发 RAG 应用程序

作者&#xff1a;来自 Elastic Gustavo Llermaly 使用 Ollama 通过 Go 创建 RAG 应用程序来利用本地模型。 关于各种开放模型&#xff0c;有很多话要说。其中一些被称为 Mixtral 系列&#xff0c;各种规模都有&#xff0c;而一种可能不太为人所知的是 openbiollm&#xff0c;这…...

编程日记 2024/12/30 11:31:18

Windows平台ROBOT安装

Windows环境下ROBOT的安装，按照下文进行部署ROBOT的前提是你的python已安装并且环境变量已设置好. 一、安装setuptools 1、下载后安装 https://pypi.python.org/pypi/setuptools/ 下载你需要的包 setuptools-75.6.0.tar.gz 解压下载的包在命令行中进入该包，敲击如下命令后…...

编程日记 2024/12/30 11:28:09

【动态规划篇】穿越算法迷雾：约瑟夫环问题的奇幻密码

欢迎拜访&#xff1a;羑悻的小杀马特.-CSDN博客 本篇主题&#xff1a;带你众人皆知的约瑟夫环问题 制作日期&#xff1a;2024.12.29 隶属专栏&#xff1a;C/C题海汇总 目录 引言&#xff1a; 一约瑟夫环问题介绍&#xff1a; 11问题介绍&#xff1a; 1.2起源与历史背景&…...

编程日记 2024/12/30 11:27:08

代码随想录算法训练营第51期第32天 | 理论基础、509. 斐波那契数、70. 爬楼梯、746. 使用最小花费爬楼梯

理论基础 动态规划&#xff1a;dp&#xff0c;每一个状态都是由上个状态推导出来的&#xff0c;因为我是先写完三道题再看理论的&#xff0c;所以有点感概&#xff1b; 确定dp数组&#xff08;dp table&#xff09;以及下标的含义确定递推公式dp数组如何初始化确定遍历顺序举…...

编程日记 2024/12/30 11:24:00

爱思唯尔word模板

爱思唯尔word模板 有时候并不一定非得latex https://download.csdn.net/download/qq_38998213/90199214 参考文献书签链接...

编程日记 2024/12/30 11:21:58

每日一题 354. 俄罗斯套娃信封问题

354. 俄罗斯套娃信封问题 需要对信封排序 ,重点是再宽度相同时&#xff0c;逐步减少其高度 class Solution { public:int maxEnvelopes(vector<vector<int>>& envelopes) {sort(envelopes.begin(),envelopes.end(),[](const vector<int>&a,const v…...

编程日记 2024/12/30 11:18:51

ASP.net网站的注册、登录和密码修改的操作详解

一、进入注册、登录和密码修改操作详解 ASP.net网站为用户提供不同权限状态下的操作界面。根据用户登录状态&#xff0c;页面会显示不同的选项。 已登录用户的操作 图1 登录后操作界面 当用户已登录系统时&#xff0c;会显示以下内容和功能&#xff1a; 1. 欢迎信息 页面顶部…...

编程日记 2024/12/30 11:15:48

2024.12.29（进程线程实现并发服务器）

作业 多进程多线程并发服务器实现一遍提交。 服务器 #include <myhead.h> #define PORT 12345 #define IP "192.168.124.123"void *fun(void *fd) {int newfd *(int *)fd;char buff[1024];while(1){int res recv(newfd,buff,sizeof(buff),0);if(res 0){p…...

编程日记 2024/12/30 11:14:47

如何在 Ubuntu 上安装 PyTorch

简介 PyTorch 因其易用性、动态计算图和高效性而日益流行&#xff0c;成为实现深度学习模型的首选。如果你想探索这个工具并学习如何在 Ubuntu 上安装 PyTorch&#xff0c;本指南将对你有所帮助&#xff01; 在本教程中&#xff0c;我们将引导你完成在 Ubuntu 系统上使用 Pip…...

编程日记 2024/12/30 11:13:46

8-Gin 中间件 --[Gin 框架入门精讲与实战案例] 【文末有测试代码】

路由中间件 Gin 是一个用 Go (Golang) 编写的 HTTP web 框架。它以性能好、中间件支持灵活著称&#xff0c;非常适合用来构建微服务或 RESTful API 服务。下面我将提供三个使用 Gin 的路由中间件的完整示例。 示例 1: 简单的日志记录中间件 这个中间件会在每个请求处理前后打…...

编程日记 2024/12/30 11:10:42

【潜意识Java】深入详细理解分析Java中的toString()方法重写完整笔记总结，超级详细。

目录 一、toString() 方法是啥&#xff1f; &#xff08;一&#xff09;默认的 toString() 方法 &#xff08;二&#xff09;toString() 方法的作用 二、为啥要重写 toString() 方法&#xff1f; &#xff08;一&#xff09;提高代码的可读性 &#xff08;二&#xff09;…...

编程日记 2024/12/30 11:09:41

【论文笔记】Contrastive Learning for Sign Language Recognition and Translation

&#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&#xff0c;为生民立命&#xff0c;为往圣继绝学&#xff0c;为万世开太平。 基本信息 标题: Contrastive Learning for…...

编程日记 2024/12/30 11:08:39

Gitlab17.7+Jenkins2.4.91实现Fastapi/Django项目持续发布版本详细操作(亲测可用)

一、gitlab设置&#xff1a; 1、进入gitlab选择主页在左侧菜单的下面点击管理员按钮。 2、选择左侧菜单的设置&#xff0c;选择网络&#xff0c;在右侧选择出站请求后选择允许来自webhooks和集成对本地网络的请求 3、webhook设置 进入你自己的项目选择左侧菜单的设置&#xff…...

编程日记 2024/12/30 11:05:28

一起来看--红黑树

【欢迎关注编码小哥&#xff0c;学习更多实用的编程方法和技巧】 红黑树是一种自平衡的二叉搜索树&#xff0c;广泛应用于计算机科学中&#xff0c;尤其是在实现关联数组和集合时。它的设计旨在确保在最坏情况下&#xff0c;基本动态集合操作&#xff08;如插入、删除和查找&am…...

编程日记 2024/12/30 11:04:27

SpringBoot整合篇 05、Springboot整合Redission

文章目录 前言Redission详细配置步骤pom依赖application.yaml配置类CacheConfigEnvironmentContext RedissionController单测 前言 本篇博客是SpringBoot整合Redission&#xff0c;若文章中出现相关问题&#xff0c;请指出&#xff01; 所有博客文件目录索引&#xff1a;博客…...

编程日记 2024/12/30 11:01:24

供应链系统设计-供应链中台系统设计（六）- 商品中心概念篇

概述 我们在供应链系统设计-中台系统设计系列&#xff08;五&#xff09;- 供应链中台实践概述 中描述了什么是供应链中台&#xff0c;供应链中台主要包含了那些组成部门。包括业务中台、通用中台等概念。为了后续方便大家对于中台有更深入的理解&#xff0c;我会逐一针对中台…...

编程日记 2024/12/30 10:59:22

胡闹厨房练习（三）

ScriptableObject 一、初步了解 1、实质：是一种特殊类型的Unity对象， 2、作用：用于存储大量数据，而不必依附于游戏场景中的某个GameObject。 3、特点： 可以在不增加场景中对象数量的情况下，管理和存储复杂的数据结构、配置信息、游戏状态等。 4、适用：非常适合用来…...

编程日记 2024/12/30 10:53:15

关于ESD（静电放电）等级的划分

关于ESD&#xff08;静电放电&#xff09;等级的划分&#xff0c;主要依据不同的测试模型和测试标准。以下是对HBM&#xff08;人体模型&#xff09;和CDM&#xff08;充电器件模型&#xff09;两种测试模型下ESD等级划分的详细解释&#xff1a; HBM ESD等级划分 HBM ESD等级…...

编程日记 2024/12/30 10:51:12

探究步进电机与输入脉冲的关系

深入了解步进电机 前言一、 步进电机原理二、 细分三、脉冲数总结 前言 主要是探究以下内容&#xff1a; 1、步进电机的步进角。 2、什么是细分。 3、脉冲的计算。 最后再扩展以下STM32定时器的计算方法。 一、 步进电机原理 其实语言描述怎么样都不直观&#xff0c;我更建议…...

编程日记 2024/12/30 10:49:10

基于YOLOV5+Flask安全帽RTSP视频流实时目标检测

1、背景 在现代工业和建筑行业中&#xff0c;安全始终是首要考虑的因素之一。特别是在施工现场&#xff0c;工人佩戴安全帽是确保人身安全的基本要求。然而&#xff0c;人工监督难免会有疏漏&#xff0c;尤其是在大型工地或复杂环境中&#xff0c;确保每个人都佩戴安全帽变得非…...

编程日记 2024/12/30 10:46:07

Windows内置的服务器IIS（Internet Information Services）托管网站

一. 安装IIS 打开控制面板&#xff1a;在开始菜单搜索“控制面板”并打开它。程序和功能&#xff1a;点击“程序”然后选择“程序和功能”。启用或关闭Windows功能&#xff1a;在左侧菜单中选择“启用或关闭Windows功能”。查找并勾选IIS&#xff1a;在弹出的窗口中&#xff0c…...

编程日记 2024/12/30 10:43:03

虚幻引擎结构之UObject

一. UObject 的介绍 UObject 是虚幻引擎中的核心基础类，所有其他游戏对象和资源类都直接或间接地继承自它。作为虚幻引擎的基石，UObject 提供了多项关键功能，包括内存管理、序列化、反射（introspection）、垃圾回收以及元数据支持。在虚幻引擎中，UObject 类的实例通常被称…...

编程日记 2024/12/30 10:42:01

js的Reflect对象

Reflect 对象是 JavaScript ES6 中引入的一个内建对象&#xff0c;它提供了一系列与对象操作相关的方法。这些方法与 Object 对象上的方法类似&#xff0c;但在行为上有一些差异&#xff0c;并且更加规范和统一。Reflect 对象并不是一个构造函数&#xff0c;不能被 new 操作符调…...

编程日记 2024/12/30 10:37:58

this指向了谁？

看函数在执行的时候是如何调用的&#xff0c; 1 如果这个函数是用普通函数调用模式来进行调用&#xff0c;它内部的this指向了window; 2 如果一个函数在调用的时候是通过对象方法模式来进行调用&#xff0c;则它内部的this就是我们的对象; 3 如果一个函数在调用的时候通过构…...

编程日记 2024/12/30 10:36:57

基于Resnet、LSTM、Shufflenet及CNN网络的Daily_and_Sports_Activities数据集仿真

在深度学习领域&#xff0c;不同的网络结构设计用于解决特定的问题。本文将详细分析四种主流网络结构&#xff1a;卷积神经网络&#xff08;CNN&#xff09;、残差网络&#xff08;ResNet&#xff09;、长短期记忆网络&#xff08;LSTM&#xff09;和洗牌网络&#xff08;Shuff…...

编程日记 2024/12/30 10:35:55

mac系统vsCode中使用Better Comments在.vue文件里失效

问题&#xff1a;关于Better Comments默认在html、TS、JS中有效&#xff0c;在vue中无效,需要单独进行配置 windows系统可以参考友链Better Comments&#xff08;注释高亮&#xff09;在vue文件里失效的问题 关于Better Comments电脑的配置路径&#xff1a; Windows系统&…...

编程日记 2024/12/30 10:32:52