用于让用户在不同的视图中进行切换。
属性名 | 描述 | 类型 | 默认值 | 必选 |
className | 自定义class | String | false | |
activeCls | 自定义激活tabbar的class | String | ||
tabs | tab数据,其中包括选项标题title ,徽标类型badgeType 分为圆点dot 和文本text ,不设置badgeType 则不显示徽标。徽标文本badgeText 在badgeType 为text 时生效 |
Array<title, badgeType, badgeText> | true | |
activeTab | 当前激活Tab索引 | Number | true | |
showPlus | 是否显示‘+’icon | Boolean | false | false |
onPlusClick | ‘+’icon被点击时的回调 | () => {} | false | |
onTabClick | tab 被点击的回调 | (index: Number) => void | false | |
onChange | tab变化时触发 | (index: Number) => void | false | |
swipeable | 是否可以滑动内容切换 | Boolean | true | false |
duration | 当swipeable为true时滑动动画时长,单位ms | Number | 500(ms) | false |
tabBarBackgroundColor | tabBar背景色 | String | false | |
tabBarActiveTextColor | tabBar激活Tab文字颜色 | String | false | |
tabBarInactiveTextColor | tabBar非激活Tab文字颜色 | String | false | |
tabBarUnderlineColor | tabBar下划线颜色 | String | false | |
tabBarCls | tabBar自定义样式class | String | false |
视图内容
属性名 | 描述 | 类型 | 默认值 | 必选 |
index | 列表项的唯一索引 | String |
1 2 3 4 5 6 7 | { "defaultTitle" : "应用AntUI组件库" , "usingComponents" : { "tabs" : "mini-antui/es/tabs/index" , "tab-content" : "mini-antui/es/tabs/tab-content/index" } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <view> <tabs tabs= "{{tabs}}" showPlus= "{{true}}" onTabClick= "handleTabClick" onChange= "handleTabChange" onPlusClick= "handlePlusClick" activeTab= "{{activeTab}}" > <block a: for = "{{tabs}}" > <tab-content key= "{{index}}" > <view class = "tab-content" >content of {{item.title}}</view> </tab-content> </block> </tabs> </view> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | Page({ data: { tabs: [ { title: '选项' , badgeType: 'text' , badgeText: '6' , }, { title: '选项二' , badgeType: 'dot' , }, { title: '3 Tab' }, { title: '4 Tab' }, { title: '5 Tab' }, ], activeTab: 2 , }, handleTabClick({ index }) { this .setData({ activeTab: index, }); }, handleTabChange({ index }) { this .setData({ activeTab: index, }); }, handlePlusClick() { my.alert({ content: 'plus clicked' , }); }, }); |
1 2 3 4 5 6 | .tab-content { display: flex; justify-content: center; align-items: center; height: 300px; } |