鸿蒙组件学习_Tabs组件

阐明

该组件从API Version 7 开始支持。
子组件

仅可包罗子组件TabContent
参数

1. barPosition     设置Tabs的页签位置,默认值: BarPosition.Start
2.     Start   vertical属性方法设置为true时,页签位于容器左侧;vertical属性方法设置为false时,页签位于容器顶部。
3.     End     vertical属性方法设置true时,页签位于容器右侧;vertical属性方法设置为false时,页签位于容器底部。
4. index   设置初始页签索引,默认值: 0,可选值[0,TabContent子节点数量-1]
5. controller  设置Tabs控制器(TabsController)

复制代码

属性

1. vertical    设置为false时为横向Tabs,设置为true时为纵向Tabs。默认值(false)
2. scrollable  设置为true时可以通过滑动页面进行页面切换,为false时不可滑动切换页面。默认值:true
3. barMode     TabBar布局模式
4.     Scrollable  超过该TabBar总长度可滑动
5.     Fixed   所有TabBar平均分配barWidth宽度
6. barWidth    TarBar的宽度值
7. barHeight   TabBar的高度值
8. animationDuration   TabContent滑动动画时长。不设置时,点击切换页签无动画,滑动切换有动画;设置时,点击切换和滑动切换都有动画。

复制代码

变乱

1. onChange((index) => {}) Tab页切换后触发的事件
2. 触发该事件的条件:
3. 1. TabContent支持滑动时，组件触发滑动时触发。
4. 2. 通过控制器API接口调用。
5. 3. 通过状态变量构造的属性值进行修改。
6. 4. 通过页签处点击触发。

复制代码

TabsController

Tabs组件的控制器，用于控制Tabs组件进行页面切换。不支持一个TabsController控制多个Tabs组件。
方法: changeIndex(value) 页签在Tabs里的索引值,索引值从0开始。
练习

1. @Entry
2. @Component
3. struct TabsTest {
4.   private controller: TabsController = new TabsController()
5.   private index: number = 0
6.   build() {
7.     Column(){
8.       Tabs({
9.         barPosition: BarPosition.End,
10.         index: this.index,
11.         controller: this.controller
12.       }){
13.         TabContent(){
14.           Text('首页')
15.         }.tabBar('首页')
16.         TabContent(){
17.           Text('分类')
18.         }.tabBar('分类')
19.         TabContent(){
20.           Text('购物')
21.         }.tabBar('购物')
22.         TabContent(){
23.           Text('我的')
24.         }.tabBar('我的')
25.       }.vertical(false)
26.       .barPosition(BarPosition.End)
27.       .scrollable(true)
28.       .barMode(BarMode.Fixed)
29.       .barWidth(300)
30.       .barHeight(50)
31.       .animationDuration(100)
32.       .onChange((index) => {
33.         this.index = index
34.       })
35.       .height('90%')
36.       Button('切换下一个')
37.         .onClick(() => {
38.           this.controller.changeIndex((this.index + 1) % 4)
39.         })
40.     }
41.   }
42. }

复制代码

TabContent

阐明

仅在Tabs中利用，该组件从API Version 7 开始支持。
子组件

支持单个子组件
   tabBar属性可以调用@Builder函数来设计样式

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。