uniapp笔记-底部和首部标签页菜单生成

ops/2025/3/18 16:01:19/

逻辑

这些都是需要配置pages.json文件。

其中底部需要手动配置tarBar,如:

	"tabBar": {"list":[{"pagePath": "pages/index/index","text": "首页"},{"pagePath": "pages/category/tab1/tab1","text": "分类1"}]},

首部可以通过HBuilder X,快速生成,制动配置,如:

	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"}},{"path" : "pages/category/tab1/tab1","style" : {"navigationBarTitleText" : "分类1"}}],

例子

新建category目录

新建页面:

默认情况下都会在pages.json中注册。

创建完成后修改category/tab2/tab2.vue

将如下:

<template><view></view>
</template>

修改为:

<template><view><text>This is tab2</text></view>
</template>

再回到pages.json,可见已自动注册:

修改titleText,如下代码:

	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"}},{"path" : "pages/category/tab1/tab1","style" : {"navigationBarTitleText" : "分类1"}},{"path" : "pages/category/tab2/tab2","style" : {"navigationBarTitleText" : "分类2"}}],

这样首部的菜单就配置完成了。

下面说下底部的。

对应的文档如下:

通过官方的示例代码:

"tabBar": {"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/component/index","iconPath": "static/image/icon_component.png","selectedIconPath": "static/image/icon_component_HL.png","text": "组件"}, {"pagePath": "pages/API/index","iconPath": "static/image/icon_API.png","selectedIconPath": "static/image/icon_API_HL.png","text": "接口"}]
}

修改原代码:

	"tabBar": {"list":[{"pagePath": "pages/index/index","text": "首页"},{"pagePath": "pages/category/tab1/tab1","text": "分类1"}]},

为:

	"tabBar": {"list":[{"pagePath": "pages/index/index","text": "首页"},{"pagePath": "pages/category/tab1/tab1","text": "分类1"},{"pagePath": "pages/category/tab2/tab2","text": "分类2"}]},

这样底部的菜单就修改完成了。

运行截图如下:


http://www.ppmy.cn/ops/166807.html

相关文章

如何在vscode中编译linux中的c++文件

方式一 在终端打开进行连接编译 指令含义&#xff1a;将 muduo_server.cpp 源文件编译成一个可执行文件 server&#xff0c;并且在链接过程中使用 muduo_net、muduo_base 库以及 pthread 库 方式二 在vscode中修改配置文件 按F1打开配置文件搜索栏&#xff0c;输入C/C 打开…

【Devops】DevOps and CI/CD Pipelines

1. 什么是 DevOps&#xff1f; DevOps 是开发&#xff08;Development&#xff09;和运维&#xff08;Operations&#xff09;的结合&#xff0c;旨在缩短软件开发生命周期&#xff0c;同时交付高质量的软件。翻译&#xff1a;DevOps 是一种结合开发和运维实践的方法&#xff…

如何利用 Zeabur 实现 OceanBase 的一键部署

引言 Zeabur 是一个功能强大且即开即用的自动化部署平台&#xff0c;它不仅能迅速部署多种应用&#xff0c;还支持一键安装 MySQL、PostgreSQL 等数据库服务。 Zeabur 拥有众多国内外用户&#xff0c;如 AFFiNE、Bytebase 等企业客户&#xff0c;以及大量全栈和独立开发者。将…

Matlab GPU加速技术

1. GPU 加速简介 &#xff08;1&#xff09;为什么使用 GPU 加速&#xff1f; CPU 擅长处理逻辑复杂的串行任务&#xff0c;而 GPU 拥有数千个流处理器&#xff0c;专为并行计算设计。对于大规模矩阵运算、深度学习训练或科学计算等任务&#xff0c;GPU 加速可将计算速度提升数…

二分查找-搜索二维矩阵

74.搜索二维矩阵 给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a;每行中的整数从左到右按非严格递增顺序排列。 每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c;返回 true &#xff1b;否则&#xff0…

数智读书笔记系列018 《多模态大模型:技术原理与实战》解锁多模态从原理到实战的深度探索

书籍初印象&#xff1a;开启多模态大模型之旅 在人工智能飞速发展的今天&#xff0c;多模态大模型已成为推动行业进步的关键力量。《多模态大模型&#xff1a;技术原理与实战》这本书&#xff0c;犹如一把钥匙&#xff0c;为我们打开了深入了解多模态大模型的大门。 它由彭勇…

debian12运行sql server2022(docker)

内容根据微软官方文档&#xff0c;经过测验&#xff0c;顺序执行即可使用docker运行sql server2022 需要正确配置docker&#xff0c;如果没有配置看我先前的文章 因为只有ubuntu18.04才可以直接在系统中下载sql server&#xff0c;所以想要在系统中使用sql server需要使用docke…

Vue 生命周期详解:从创建到销毁的全过程

Vue.js 是一个流行的前端框架&#xff0c;它通过组件化的方式帮助开发者构建用户界面。在 Vue 中&#xff0c;每个组件实例都有其生命周期&#xff0c;从创建、挂载、更新到销毁&#xff0c;Vue 提供了一系列的生命周期钩子函数&#xff0c;允许我们在组件的不同阶段执行自定义…