全部产品

选项卡(tabs)

更新时间:2020-03-26 11:53:26

选项卡(tabs)可让用户在不同的视图中进行切换。

说明: 选项卡组件不支持 tab 页面中的内容对屏幕尺寸进行自适应。

tabs

属性名 描述 类型 默认值 必选
className 自定义 class String - false
activeCls 自定义激活 tabbar 的 class String - -
tabs tab 数据,其中包括选项标题 title,徽标类型 badgeType 分为圆点 dot 和文本 text,不设置 badgeType 则不显示徽标。徽标文本 badgeTextbadgeTypetext 时生效 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

tab-content

视图内容

属性名 描述 类型 默认值 必选
index 列表项的唯一索引 String - -

代码示例

  1. {
  2. "defaultTitle": "小程序AntUI组件库",
  3. "usingComponents": {
  4. "tabs": "mini-antui/es/tabs/index",
  5. "tab-content": "mini-antui/es/tabs/tab-content/index"
  6. }
  7. }
  1. <view>
  2. <tabs
  3. tabs="{{tabs}}"
  4. showPlus="{{true}}"
  5. onTabClick="handleTabClick"
  6. onChange="handleTabChange"
  7. onPlusClick="handlePlusClick"
  8. activeTab="{{activeTab}}"
  9. >
  10. <block a:for="{{tabs}}">
  11. <tab-content key="{{index}}">
  12. <view class="tab-content">content of {{item.title}}</view>
  13. </tab-content>
  14. </block>
  15. </tabs>
  16. </view>
  1. Page({
  2. data: {
  3. tabs: [
  4. {
  5. title: '选项',
  6. badgeType: 'text',
  7. badgeText: '6',
  8. },
  9. {
  10. title: '选项二',
  11. badgeType: 'dot',
  12. },
  13. { title: '3 Tab' },
  14. { title: '4 Tab' },
  15. { title: '5 Tab' },
  16. ],
  17. activeTab: 2,
  18. },
  19. handleTabClick({ index }) {
  20. this.setData({
  21. activeTab: index,
  22. });
  23. },
  24. handleTabChange({ index }) {
  25. this.setData({
  26. activeTab: index,
  27. });
  28. },
  29. handlePlusClick() {
  30. my.alert({
  31. content: 'plus clicked',
  32. });
  33. },
  34. });
  1. .tab-content {
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. height: 300px;
  6. }