uniapp实现底部导航栏

2023-10-31

首先在pages.json中找到"globalStyle",在它下面建立"tabBar"

如下:

"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": "接口"
	}]
}

其中pagePath是页面路径,iconPath是页面图标路径,selectedIconPath是页面选中后的图标路径,text是页面名称,

示例:

"tabBar": {
	"borderStyle": "black",
	"selectedColor": "#FB7299",
	"color": "#444444",
	"list": [
		{
			"pagePath": "pages/index/index",
			"iconPath": "static/tabbar/首页.png",
			/* "selectedIconPath": "static/tabbar/", */
			"text": "主页"
		},{
			"pagePath": "pages/cate/cate",
			"iconPath": "static/tabbar/收藏.png",
			/*"selectedIconPath": "static/tabbar/", */
			"text": "关注"
		},{
			"pagePath": "pages/mine/mine",
			"iconPath": "static/tabbar/部群归属.png",
			/*"selectedIconPath": "static/tabbar/", */
			"text": "我的"
		}
	]
},

效果:

tabBar
接下来就可以实现各个页面的功能了。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

uniapp实现底部导航栏 的相关文章

随机推荐

  • 动手学CV-目标检测入门教程2:VOC数据集

    3 2 目标检测数据集VOC 本文来自开源组织 DataWhale CV小组创作的目标检测入门教程 对应开源项目 动手学CV Pytorch 的第3章的内容 教程中涉及的代码也可以在项目中找到 后续会持续更新更多的优质内容 欢迎 如果使用我
  • 使用YOLOV5训练自己的数据集时所遇到问题

    训练过程中 1 attributeerror module yaml has no attribute load 方法1 如果另一个名为 yaml py 的文件在 PyYaml 库之前出现在你的 sys path 中 就会接收并导入该 ya
  • ubuntu安装docker

    sudo apt get remove docker docker engine docker io containerd runc sudo apt get update sudo apt get install apt transpor
  • 强化学习中累积奖赏公式的推导

    转载于 强化学习中累积奖赏公式的推导 qingtian11112的博客 CSDN博客 强化学习累计奖励 1 一些符号解释 P C D 表示条件概率 在D发生的条件下 C发生的概率 E C D 表示在D发生的条件下 求C的期望 即有 X 表示
  • 二叉树面试题

    将二叉查找树变为有序双向链表 考虑 二叉查找树的特点是左子树比根节点小 根节点又比右子树小 所以要把二叉查找树变为有序的双向链表 就要把左子树连接到它的前一个结点 右子树作为后一个结点 递归的进行下去 如图所示 问题解决 按照中序遍历二叉树
  • leetcode1798. 你能构造出连续值的最大数目(前缀和,贪心)

    题面 程序 class Solution public int getMaximumConsecutive vector
  • DM6446的视频前端VPFE的驱动大框架解析

    本文均属自己阅读源码的点滴总结 转账请注明出处谢谢 欢迎和大家交流 qq 1037701636 email 200803090209 zjut com gzzaigcn2012 gmail com dm6446是基于Davinci架构设计的
  • 什么是NFT?

    什么是NFT Not Fungible Token 非同质化代币 NFT是啥 内啡肽吗 很苦很苦的那个 术语说明 NFT Non Fungible Token 非同质化代币 FT Fungible Token 同质化代币 UTXO Unsp
  • python 模块 — logging模块、smtplib和email模块

    python 模块 日志 什么时候需要日志记录 排错 程序调试 用户行为分析 logging模块 日志等级 数值表示 描述 DEBUG 10 最详细的日志 常用于调试 INFO 20 仅次于debug的详细日志 记录关键节点 WARNING
  • std::string用法详解

    前言 string 的角色 1 string 使用 1 1 充分使用string 操作符 1 2 眼花缭乱的string find 函数 1 3 string insert replace erase 2 string 和 C风格字符串 3
  • centos8启动docker-mysql8容器

    README 本文记录了 centos8 安装 启动mysql8的docker容器的步骤 1 安装mysql8 docker容器 步骤1 查看mysql8 docker镜像版本 最简单的方式是上 Docker Hubhttps hub do
  • plsql因事务未提交造成的锁表的解决办法

    针对自己经常plsql锁表情况做个备忘录 方便下次操作 原文链接 https blog csdn net nmjuzi article details 80353670 1 执行以下语句可查询被锁的表 select b owner b ob
  • 敏捷测试团队管理的挑战与机会

    敏捷团队的管理其实的确面临着很多的挑战 蔡老师分别从敏捷管理的挑战 接受敏捷 敏捷下面的组织结构 敏捷架构下的沟通 敏捷下的KPI考核 以及机会和发展几个方面进行深入的讨论 其实我觉得各个公司施行敏捷的时候都会遇见这次讲师所分享的一些问题
  • Hive jdbc运行方式

    1 在服务器端启动hiveserver2 metastore服务所在的服务器 hive service hiveserver2 2 代码和访问mysql数据库的一样 package com bjsxt hive import java sq
  • [币严区块链]数字货币交易所之以太坊(ETH)钱包对接(一) 以太坊Geth客户端安装...

    以太坊Geth客户端安装 geth是以太坊的官方客户端 它是一个命令行工具 提供很多命令和选项 可以运行以太坊节点 创建和管理账户 发送交易 挖矿 部署智能合约等 下面介绍geth的三种安装方法 直接下载可执行文件 在线安装 从源码编译安装
  • 特征选择-包裹式选择

    包裹式选择与过滤式选择不考虑后续学习器不同 直接把最终使用的学习器的性能作为特征子集的评价准则 换言之 包裹式选择的目的就是为给定学习器选择最有利于其性能 量身定做 的特征子集 与过滤式选择的区别 包裹式选择方法直接针对给定学习器进行优化
  • OSI七层作用及常见协议

    OSI 模型 Open Systems Interconnection Model 由国际化标准组织ISO The International Organization for Standardization 收录在ISO 7489标准中并
  • 设有一个线性表E = { e1, e2, … , en - 1, en },设计一个算法,将线性表逆置,即使元素排列次序颠倒过来,成为逆线性表E'={ en , en-1 , … , e2 , e1

    设有一个线性表E e1 e2 en 1 en 设计一个算法 将线性表逆置 即使元素排列次序颠倒过来 成为逆线性表E en en 1 e2 e1 要求逆线性表占用原线性表空间 并且用顺序表和单链表两种方法表示 分别用两个程序来完成 将链表倒置
  • 使用R语言使用梯度提升算法进行预测建模

    目录 1 什么是梯度提升算法 2 梯度提升算法的步骤 3 在R中实现梯度提升算法进行预测建模
  • uniapp实现底部导航栏

    首先在pages json中找到 globalStyle 在它下面建立 tabBar 如下 tabBar color 7A7E83 selectedColor 3cc51f borderStyle black backgroundColor