
回复
相信大家都接过电话吧,咳咳,本节来模拟一个不喜欢接电话的小朋友,在切换界面上加上小红点,具体的通话界面之后可能会做
一种可以通过页签进行内容视图切换的容器组件,每个页签对应一个内容视图。
说明:
该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: TabsController})
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
---|---|---|---|
barPosition | BarPosition | 否 | 指定页签位置来创建Tabs容器组件。 默认值:BarPosition.Start |
index | number | 否 | 指定初次初始页签索引。 默认值:0 |
controller | TabsController | 否 | 设置Tabs控制器。 |
名称 | 描述 |
---|---|
Start | vertical属性方法设置为true时,页签位于容器左侧;vertical属性方法设置为false时,页签位于容器顶部。 |
End | vertical属性方法设置为true时,页签位于容器右侧;vertical属性方法设置为false时,页签位于容器底部。 |
名称 | 参数类型 | 描述 |
---|---|---|
vertical | boolean | 设置为false是为横向Tabs,设置为true时为纵向Tabs。 默认值:false |
scrollable | boolean | 设置为true时可以通过滑动页面进行页面切换,为false时不可滑动切换页面。 默认值:true |
barMode | BarMode | TabBar布局模式,具体描述见BarMode枚举说明。 默认值:BarMode.Fixed |
barWidth | number | Length8+ | TabBar的宽度值。 |
barHeight | number | Length8+ | TabBar的高度值。 |
animationDuration | number | TabContent滑动动画时长。 默认值:200 |
名称 | 描述 |
---|---|
Scrollable | TabBar使用实际布局宽度, 超过总长度后可滑动。 |
Fixed | 所有TabBar平均分配宽度。 |
仅在Tabs中使用,对应一个切换页签的内容视图。
说明:
该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
除支持通用属性外,还支持以下属性:
名称 | 参数类型 | 描述 |
---|---|---|
tabBar | string | Resource | { icon?: string | Resource, text?: string | Resource } | CustomBuilder8+ | 设置TabBar上显示内容。 CustomBuilder: 构造器,内部可以传入组件(API8版本以上适用)。 > 说明: > 如果icon采用svg格式图源,则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源,icon大小则是svg本身内置的宽高属性值大小。 |
说明:
- TabContent组件不支持设置通用宽度属性,其宽度默认撑满Tabs父组件。
- TabContent组件不支持设置通用高度属性,其高度由Tabs父组件高度与TabBar组件高度决定。
- TabContent组件不支持触摸热区设置。
可以附加在单个组件上用于信息标记的容器组件。
说明: 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
首先需要创建一个TabContent组件,实现页面切换
在Tab组件中,图标需要选择两种风格,一个是没有点击到的,另一个是被选中的状态,我这里使用本色和红色来演示
这里加入传统的角标颜色,小红点来实现,当前未接电话有14个