uni-app tabbar组件

锋哥原创的uni-app视频教程:

2023版uniapp从入门到上天视频教程(Java后端无废话版),火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版),火爆更新中...共计23条视频,包括:第1讲 uni-app简介、第2讲 uni-app环境搭建、第3讲 uni-app之HelloWorld实现等,UP主更多精彩视频,请关注UP账号。icon-default.png?t=N7T8https://www.bilibili.com/video/BV1eG411N71c/如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定一级导航栏,以及 tab 切换时显示的对应页。

在 pages.json 中提供 tabBar 配置,不仅仅是为了方便快速开发导航,更重要的是在App和小程序端提升性能。在这两个平台,底层原生引擎在启动时无需等待js引擎初始化,即可直接读取 pages.json 中配置的 tabBar 信息,渲染原生tab。

Tips

  • 当设置 position 为 top 时,将不会显示 icon

  • tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

  • tabbar 切换第一次加载时可能渲染不及时,可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花(hello uni-app使用了此方式)

  • tabbar 的页面展现过一次后就保留在内存中,再次切换 tabbar 页面,只会触发每个页面的onShow,不会再触发onLoad。

  • 顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话,建议不使用 tabbar 的顶部设置,而是自己做顶部选项卡,可参考 hello uni-app->模板->顶部选项卡。

属性说明:

属性类型必填默认值描述平台差异说明
colorHexColortab 上的文字默认颜色
selectedColorHexColortab 上的文字选中时的颜色
backgroundColorHexColortab 的背景色
borderStyleStringblacktabbar 上边框的颜色,可选值 black/white,也支持其他颜色值App 2.3.4+ 、H5 3.0.0+
blurEffectStringnoneiOS 高斯模糊效果,可选值 dark/extralight/light/none(参考:使用说明)App 2.4.0+ 支持、H5 3.0.0+(只有最新版浏览器才支持)
listArraytab 的列表,详见 list 属性说明,最少2个、最多5个 tab
positionStringbottom可选值 bottom、toptop 值仅微信小程序支持
fontSizeString10px文字默认大小App 2.3.4+、H5 3.0.0+
iconWidthString24px图标默认宽度(高度等比例缩放)App 2.3.4+、H5 3.0.0+
spacingString3px图标和文字的间距App 2.3.4+、H5 3.0.0+
heightString50pxtabBar 默认高度App 2.3.4+、H5 3.0.0+
midButtonObject中间按钮 仅在 list 项为偶数时有效App 2.3.4+、H5 3.0.0+
iconfontSrcStringlist设置 iconfont 属性时,需要指定字体文件路径App 3.4.4+、H5 3.5.3+

其中 list 接收一个数组,数组中的每个项都是一个对象,其属性值如下:

属性类型必填说明平台差异
pagePathString页面路径,必须在 pages 中先定义
textStringtab 上按钮文字,在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
iconPathString图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 position 为 top 时,此参数无效,不支持网络图片,不支持字体图标
selectedIconPathString选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 position 为 top 时,此参数无效
visibleBoolean该项是否显示,默认显示App (3.2.10+)、H5 (3.2.10+)
iconfontObject字体图标,优先级高于 iconPathApp(3.4.4+)、H5 (3.5.3+)

"tabBar": {"color": "#FF8C00","selectedColor":"#B22222","backgroundColor":"#FFFAFA","borderStyle":"black","position":"bottom","list": [{"text": "主页","pagePath": "pages/index/index","iconPath": "static/tabbar/icon/_home.png","selectedIconPath": "static/tabbar/icon/home.png"},{"text": "分类","pagePath": "pages/classification/classification","iconPath": "static/tabbar/icon/_classification.png","selectedIconPath": "static/tabbar/icon/classification.png"},{"text": "购物车","pagePath": "pages/cart/cart","iconPath": "static/tabbar/icon/_cart.png","selectedIconPath": "static/tabbar/icon/cart.png"},{"text": "我的","pagePath": "pages/my/my","iconPath": "static/tabbar/icon/_my.png","selectedIconPath": "static/tabbar/icon/my.png"}]}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/579670.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SEO网站分类完整指南

你知道吗,适当的网站分类结构对于良好的SEO很重要?在我们的最新指南中了解如何使用网站分类。 对于那些已经在SEO领域工作了一段时间的人来说,你可能听说过网站分类法,因为它指的是网站。 当您提到网站的结构以及用户浏览的难易…

Zookeeper在分布式命名服务中的实践

Java学习面试指南:https://javaxiaobear.cn 命名服务是为系统中的资源提供标识能力。ZooKeeper的命名服务主要是利用ZooKeeper节点的树形分层结构和子节点的顺序维护能力,来为分布式系统中的资源命名。 哪些应用场景需要用到分布式命名服务呢&#xff1…

Python in Visual Studio Code 2023年12月发布

作者:Courtney Webster 排版:Alan Wang 我们很高兴地宣布 Visual Studio Code 的 Python 和 Jupyter 扩展将于 2023 年 12 月发布! 此版本包括以下公告: 可配置的调试选项已添加到“运行”按钮菜单可以使用 Pylance 显示类型层次…

搭建自动化 Web 页面性能检测系统 —— 设计篇

​ 编辑 页面性能对于用户体验、用户留存有着重要影响,当页面加载时间过长时,往往会伴随着一部分用户的流失,也会带来一些用户差评。性能的优劣往往是同类产品中胜出的影响因素,也是一个网站口碑的重要评判标准。 一、名称解释 …

RM3100 stm32驱动(硬件i2c)

目录 RM3100接线HAL库I2C函数HAL_I2C_Mem_ReadHAL_I2C_Mem_WriteHAL_I2C_Master_Transmit / HAL_I2C_Master_Receive例子 HSHAKE寄存器 cubemx配置RM3100寄存器驱动最终效果 RM3100接线 原理图 SA0 SA1接地,此时i2c设备地址为0100000,即0x20 如果SA0接…

Android studio 花式按键

一、activity_main.xml代码&#xff1a; <?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"http://schemas.a…

Bug:Too many open files【ulimit限制】

Bug&#xff1a;Too many open files 今天在开发某个下载功能时&#xff0c;发现文件总是下载到250多个程序就挂掉&#xff0c;同时会打崩服务器&#xff0c;查看错误日志发现报&#xff1a;too many open files. 思路&#xff1a;根据错误信息可以知道打开的文件数过多&#x…

001、安装 Rust

目录 1. 安装 Rust 2. 安装编译器 Visual Studio Code 3. 更新、卸载、文档命令 4. 结语 1. 安装 Rust 安装 Rust 非常简单&#xff0c;首先进入 Rust官网 &#xff0c;然后点击右上角的 Install 。 进入 Install 界面&#xff0c; 它会自动识别你当前的操作系统并给你推荐…

用C求斐波那契数列-----(C每日一编程)

斐波那契数列: 斐波那契数列是指这样一个数列&#xff1a;1&#xff0c;1&#xff0c;2&#xff0c;3&#xff0c;5&#xff0c;8&#xff0c;13&#xff0c;21&#xff0c;34&#xff0c;55&#xff0c;89……这个数列从第3项开始 &#xff0c;每一项都等于前两项之和。 递推…

Kubernetes (四) 资源清单及yaml文件详解

一. 资源清单 二. 编写yaml文件及内容详解 常用命令 …

OSPF多区域配置-新版(12)

目录 整体拓扑 操作步骤 1.基本配置 1.1 配置R1的IP 1.2 配置R2的IP 1.3 配置R3的IP 1.4 配置R4的IP 1.5 配置R5的IP 1.6 配置R6的IP 1.7 配置PC-1的IP地址 1.8 配置PC-2的IP地址 1.9 配置PC-3的IP地址 1.10 配置PC-4的IP地址 1.11 检测R5与PC1连通性 1.12 检测…

人工智能_机器学习076_Kmeans聚类算法_体验_亚洲国家队自动划分类别---人工智能工作笔记0116

我们开始来看聚类算法 可以看到,聚类算法,其实就是发现事物之间的,潜在的关联,把 有关联的数据分为一类 我们先启动jupyter notebook,然后 我们看到这里我们需要两个测试文件 AsiaFootball.txt里面记录了,3年的,亚洲足球队的成绩

数据分析——数据预处理和数据管道构建

目标&#xff1a;对于拿到的一个任意数据集&#xff0c;编写类似数据加载程序&#xff0c;以适应深度学习的研究。 框架&#xff1a; 针对不同的时间序列数据集&#xff0c;可以总结如下关键步骤&#xff0c;以编写类似上述代码的深度学习数据处理流程&#xff1a; 1. **了解…

开源低代码开发平台如何在数字化转型中发挥价值?

当前&#xff0c;数字化转型升级是发展潮流&#xff0c;也是很多企业提升市场竞争力&#xff0c;获得更多利润价值的发展路径。作为提质增效的办公利器&#xff0c;开源低代码开发平台也将发挥应有的价值和作用&#xff0c;在推动企业数字化转型和流程化办公的过程中贡献力量&a…

layui表格中预览视频和图片

全代码 <!DOCTYPE html> <html><head><title>Layui&#xff1a;数据表格table中预览图片、视频</title><meta charset"utf-8"/><link rel"stylesheet" href"../dist/css/layui.css"><style>&l…

竞赛保研 基于人工智能的图像分类算法研究与实现 - 深度学习卷积神经网络图像分类

文章目录 0 简介1 常用的分类网络介绍1.1 CNN1.2 VGG1.3 GoogleNet 2 图像分类部分代码实现2.1 环境依赖2.2 需要导入的包2.3 参数设置(路径&#xff0c;图像尺寸&#xff0c;数据集分割比例)2.4 从preprocessedFolder读取图片并返回numpy格式(便于在神经网络中训练)2.5 数据预…

多维时序 | MATLAB实现SSA-BiLSTM麻雀算法优化双向长短期记忆神经网络多变量时间序列预测

多维时序 | MATLAB实现SSA-BiLSTM麻雀算法优化双向长短期记忆神经网络多变量时间序列预测 目录 多维时序 | MATLAB实现SSA-BiLSTM麻雀算法优化双向长短期记忆神经网络多变量时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.MATLAB实现SSA-BiLSTM麻雀算法优化…

UDP攻击是什么?遇到UDP攻击怎么办

UDP攻击&#xff0c;也称为UDP洪水攻击&#xff0c;是一种拒绝服务&#xff08;DoS&#xff09;或分布式拒绝服务&#xff08;DDoS&#xff09;攻击的形式。在此类攻击中&#xff0c;攻击者会发送大量的UDP流量到目标网络或服务器&#xff0c;以消耗其网络带宽或系统资源。由于…

爬虫工作量由小到大的思维转变---<第二十八章 Scrapy中间件说明书>

爬虫工作量由小到大的思维转变---&#xff1c;第二十六章 Scrapy通一通中间件的问题&#xff1e;-CSDN博客 前言: (书接上面链接)自定义中间件玩不明白? 好吧,写个翻译的文档点笔记,让中间件更通俗一点!!! 正文: 全局图: 爬虫中间件--->翻译笔记: from scrapy import s…

面试题之二HTTP和RPC的区别?

面试题之二 HTTP和RPC的区别&#xff1f; Ask范围&#xff1a;分布式和微服务 难度指数&#xff1a;4星 考察频率&#xff1a;70-80% 开发年限&#xff1a;3年左右 从三个方面来回答该问题&#xff1a; 一.功能特性 1)HTTP是属于应用层的协议&#xff1a;超文本传输协议…