提供手机自适应网站制作,东莞建筑,俱乐部网站方案,二手交易网站建设的功能定位说明
该组件从API Version 7 开始支持。
子组件
仅可包含子组件TabContent
参数
barPosition 设置Tabs的页签位置,默认值: BarPosition.StartStart vertical属性方法设置为true时,页签位于容器左侧;vertical属性方法设置为false时,页签位于容器顶部。End vertic…说明
该组件从API Version 7 开始支持。
子组件
仅可包含子组件TabContent
参数
barPosition 设置Tabs的页签位置,默认值: BarPosition.StartStart vertical属性方法设置为true时,页签位于容器左侧;vertical属性方法设置为false时,页签位于容器顶部。End vertical属性方法设置true时,页签位于容器右侧;vertical属性方法设置为false时,页签位于容器底部。
index 设置初始页签索引,默认值: 0,可选值[0,TabContent子节点数量-1]
controller 设置Tabs控制器(TabsController)属性
vertical 设置为false时为横向Tabs,设置为true时为纵向Tabs。默认值(false)
scrollable 设置为true时可以通过滑动页面进行页面切换,为false时不可滑动切换页面。默认值:true
barMode TabBar布局模式Scrollable 超过该TabBar总长度可滑动Fixed 所有TabBar平均分配barWidth宽度
barWidth TarBar的宽度值
barHeight TabBar的高度值
animationDuration TabContent滑动动画时长。不设置时,点击切换页签无动画,滑动切换有动画;设置时,点击切换和滑动切换都有动画。事件
onChange((index) {}) Tab页切换后触发的事件
触发该事件的条件:
1. TabContent支持滑动时组件触发滑动时触发。
2. 通过控制器API接口调用。
3. 通过状态变量构造的属性值进行修改。
4. 通过页签处点击触发。TabsController
Tabs组件的控制器用于控制Tabs组件进行页面切换。不支持一个TabsController控制多个Tabs组件。 方法: changeIndex(value) 页签在Tabs里的索引值,索引值从0开始。
练习
Entry
Component
struct TabsTest {private controller: TabsController new TabsController()private index: number 0build() {Column(){Tabs({barPosition: BarPosition.End,index: this.index,controller: this.controller}){TabContent(){Text(首页)}.tabBar(首页)TabContent(){Text(分类)}.tabBar(分类)TabContent(){Text(购物)}.tabBar(购物)TabContent(){Text(我的)}.tabBar(我的)}.vertical(false).barPosition(BarPosition.End).scrollable(true).barMode(BarMode.Fixed).barWidth(300).barHeight(50).animationDuration(100).onChange((index) {this.index index}).height(90%)Button(切换下一个).onClick(() {this.controller.changeIndex((this.index 1) % 4)})}}
}TabContent
说明
仅在Tabs中使用该组件从API Version 7 开始支持。
子组件
支持单个子组件 tabBar属性可以调用Builder函数来设计样式
