c-tab

属性

属性名类型必填默认值说明
tabsArray是[]tabs显示内容数组，tabs中数组中具体的值请看tabs详情
active-labelString是tabs数组中的某一个label的值注意必须和tabs数组中某一个label的值相等
inlineBoolean否true代表每一个tab栏的 前置icon + tab内容 + 后置icon 的排列方向，默认水平排列
line-styleString否''标识tab栏的下划标志线的样式
active-label-styleString否"color:#FC9153"标识tab栏激活后的文案的样式
has-underlineBoolean否true是否需要下划线
active-icon-styleString否''label前缀icon或者后缀icon激活后的样式

事件

事件名描述事件参数中detail对象
tabclick点击每个tab时候出发的事件名称label:表示激活tab的文案,activeIndex:表示激活tab的索引

tabs数组具体属性详情

属性名类型必填默认值说明
labelString是tabs数组中的某一个label的值注意必须和tabs数组中某一个label的值相等
labelStyleString否外部传入控制每一个tab栏的文案样式
prefixStyleString否外部传入控制每一个tab栏的前缀样式
suffixStyleString否外部传入控制每一个tab栏的后缀样式

c-tab-pane

属性

属性名类型必填默认值说明
tabsArray是[]tabs显示内容数组，tabs中数组中具体的值请看tabs详情
active-labelString是tabs数组中的某一个label的值注意必须和tabs数组中某一个label的值相等

注意，如果c-tab-pane组件配合c-tabs组件使用，那么二者的tabs和active-label属性必须引用同一个值；每个c-tab-pane组件下，同时对应一个c-tab-pane-item组件；

c-tab-pane-item

用于提供一个可以容纳每个pane的容器,宽度 750cpx;

示例

  1. <template>
  2.   <view>
  3.     <!-- 单tab测试 -->
  4.     <view class="title">
  5.       <text>单tab案例</text>
  6.     </view>
  7.     <c-tab tabs="{{tabsAlone}}"
  8.       c-bind:tabclick="handleTabTapAlone"
  9.       active-label="{{activeLabelAlone}}"
  10.       inline="{{false}}"
  11.     >
  12.     </c-tab>
  13.     <view class="title">
  14.       <text class="title">tab+pane案例</text>
  15.     </view>
  16.     <c-tab 
  17.       tabs="{{tabs}}"
  18.       c-bind:tabclick="handleTabTap"
  19.       active-label="{{activeLabel}}"
  20.       inline="{{false}}"
  21.     >
  22.     </c-tab>
  23.     <c-tab-pane tabs="{{tabs}}" active-label="{{activeLabel}}">
  24.       <!-- 案例1 -->
  25.       <!-- 
  26.       <c-tab-pane-item c-for="{{tabs}}" >
  27.       <slot><text>{{item.label}}</text></slot>
  28.       </c-tab-pane-item> 
  29.       -->
  31.       <!-- 案例2 -->
  32.       <c-tab-pane-item>
  33.         <view class="one">
  34.           <text>1</text>
  35.         </view>
  36.       </c-tab-pane-item>
  37.       <c-tab-pane-item>
  38.         <view class="two">
  39.           <text>2</text>
  40.         </view>
  41.       </c-tab-pane-item>
  42.       <c-tab-pane-item>
  43.         <view class="three">
  44.           <text>3</text>
  45.         </view>
  46.       </c-tab-pane-item>
  47.       <c-tab-pane-item>
  48.         <view>
  49.           <text>4</text>
  50.         </view>
  51.       </c-tab-pane-item>
  52.     </c-tab-pane>
  53.   </view>
  54. </template>
  55. <script cml-type="json">
  56. {
  57.   "base": {
  58.       "usingComponents": {
  59.           "c-tab": "cml-ui/components/c-tab/c-tab",
  60.           "c-tab-pane": "cml-ui/components/c-tab-pane/c-tab-pane",
  61.           "c-tab-pane-item": "cml-ui/components/c-tab-pane-item/c-tab-pane-item"
  62.       }
  63.   }
  64. }
  65. </script>

c-tab - 图1wx

c-tab - 图2web

c-tab - 图3native

查看完整示例