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,一经查实,立即删除!

相关文章

node express简单微服务

首先,安装所需的依赖项,可以使用npm或yarn进行安装: $ npm install express axios接下来,创建一个名为service1.js的文件,用于实现第一个微服务: const express require(express); const axios require…

SEO网站分类完整指南

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

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

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

http笔记

定义 是客户端与服务端传输文本的一种协议标准 http协议是无状态的 http协议默认端口是80 hrrps协议(加密传输)端口443 ### 请求方法js get(获取信息页面) post(上传,修改,添加,服务端信息) pu…

解决谷歌浏览器下CSS设置字体小于12px无效办法,关于如何在chrome里实现小于12px的文字。

关于如何在chrome里实现小于12px的文字。 当然文字缩小到12px以下本来就一定程度影响到可用性了,建议无视chrome的这个特性。 谷歌浏览器默认最小字体为12px,小于12px的字体它都以12px显示,有时我们需要字体小点,特别是在制作英文…

运用c3p0管理数据库相对于老版默认配置文件管理数据库的优点

使用C3P0库来管理数据库连接相对于直接在默认配置文件中设置连接数据库的相关信息有一些优点,尤其是在大型或长期运行的应用程序中。以下是一些优点: 1. 连接池管理: -连接重用:C3P0通过连接池管理数据库连接,允许…

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; 它会自动识别你当前的操作系统并给你推荐…

HBase基础知识(七):HBase 性能优化示例全解

1. 高可用 在 HBase 中 HMaster 负责监控 HRegionServer 的生命周期&#xff0c;均衡 RegionServer 的负载&#xff0c; 如果 HMaster 挂掉了&#xff0c;那么整个 HBase 集群将陷入不健康的状态&#xff0c;并且此时的工作状态并不会维持太久。所以 HBase 支持对 HMaster 的高…

用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;每一项都等于前两项之和。 递推…

数据库的连接池详解

什么是数据库连接池&#xff1f; 数据库连接池是一种管理和维护数据库连接的机制&#xff0c;用于提高数据库访问的性能和效率。连接池通过在应用程序启动时创建一组数据库连接&#xff0c;并在需要时将这些连接分配给应用程序&#xff0c;然后在不再需要时将其返回到池中。这…

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

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

前端---css 属性

css 作用是美化 HTML 网页和控制页面布局的,下面这些是经常使用的一些样式属性。 1. 布局常用样式属性 width 设置元素(标签)的宽度&#xff0c;如&#xff1a;width:100px;height 设置元素(标签)的高度&#xff0c;如&#xff1a;height:200px;background 设置元素背景色或者…

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 检测…

Vue3-v-model原理

对比&#xff1a;Vue-2.3v-model原理-CSDN博客 v-model为:modelValue和update:modelValue的简写 表单类组件封装 父组件 <ChannelSelect v-model"cateId"></ChannelSelect> 子组件 <script setup> defineProps({modelValue: {type: [Number,…

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

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