当前位置: 首页 > article >正文

tabBar设置底部导航栏

如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定一级导航栏,以及 tab 切换时显示的对应页,简单来说就是像美团外卖下面的导航栏一样可以任意切换

1.首先创建三个页面,在页面里面可以写一些东西或者放一张图片方便区分。

2.在pages.json文件中globalStyle后面添加一个tabBar,记得要加上豆号。

3.在我们的tabBar里面还得写一个list用[]括号括起来因为我们有多个页面就是多个对象就得用数组的方式存起来。

在我们的tabBar里面可以看到有很多的属性它们都是干什么用的呢。

(1)color它是默认的颜色就是我们没选中时候的颜色,selectedColor是选中后的颜色就是我们选中这个导航栏时的颜色。

(2)backgroundColor是当导航栏的背景颜色,borderStyle是导航栏的边框颜色它只有两种颜色黑色和白色。

(3)咱们对象里面的的属性pagesPath是咱们页面的地址,text就是导航的文字显示,iconPath是图片路径可以给每个导航元素添加一个图片,selectedIconPath是选中后的图片显示比如选中前是一个灰色的选中后就可以给一个便于识别的颜色图片表示选中。


http://www.kler.cn/a/298549.html

相关文章:

  • 攻防世界 ics-07
  • KCP解读:C#库类图
  • Mac-docker配置
  • C++ 11,14,17 新特性
  • 【工业场景】用YOLOv8实现工业安全帽识别
  • Kafka如何实现顺序消费?
  • 威胁建模STRIDE框架
  • 如何做好API安全
  • 如果美国衰退现货黄金市场怎样分析
  • 【数据结构】基本概念和术语
  • day-52 字母异位词分组
  • MQ-135空气质量传感器(STM32)
  • 数据结构(7.2_1)——顺序查找
  • 为明天做好准备,摆脱传统财务规划的不足
  • Oracle RAC环境NBU异机恢复
  • 使用 nuxi upgrade 升级现有nuxt项目版本
  • 蓝桥杯备赛day01:循环
  • 使用Ansible进行自动化运维
  • 1-21 角点检测 opencv树莓派4B 入门系列笔记
  • 智能语音交互:人工智能如何改变我们的沟通方式?
  • 还不知道MES和PLC咋通信?5分钟看懂
  • [Redis] Redis中的String类型
  • 创新生态,共赢未来——数字媒体园区构建产业链协同新模式
  • 【前端】笔试题目整理(知识点)
  • 结构型设计模式—组合模式
  • Java学习路线图,助你成为开发高手