Tabs 容器组件的使用

267 阅读1分钟

定义

当页面内容较多时,可以通过tabs组件进行分类展示

基本用法

1719753848459.png

image.png

常用属性

  • barPosition:调整位置,开头或结尾(参数
  • vertical:导航,水平或垂直
  • scrollable:调整是否手势滑动 切换
  • animationDuration:点击滑动动画时间

image.png

滚动导航栏

  • 导航栏的内容较多,屏幕无法容纳时,可以将他设置为滚动
  • 通过Tabs组件的barMode属性即可调整固定导航栏或滚动导航栏

image.png

使用自定义TabBar

基础结构

一般会显示图形和文字,甚至有特殊的图标

image.png

高亮切换

核心思路

  • 监听切换事件->得到索引值,记录高亮的索引
  • 给每个tabBar起个标记,0、1、2
  • 在tabBar内部比较 标记==记录的索引?高亮:不高亮

image.png