c-tab

示例

  1. <template>
  2. <page title="c-tab演示">
  3.   <view>
  4.      <!-- 单tab测试 -->
  5.      <view class="title"><text >单tab案例</text></view>
  6.      <c-tab tabs="{{tabsAlone}}"
  7.      c-bind:tabclick="handleTabTapAlone"
  8.      active-label="{{activeLabelAlone}}"
  9.      has-underline="{{false}}"
  10.      inline="{{false}}"
  11.      >
  12.      </c-tab>
  14.      <view class="title"><text class="title">tab+pane案例</text></view>
  15.      <c-tab tabs="{{tabs}}"
  16.      c-bind:tabclick="handleTabTap"
  17.      active-label="{{activeLabel}}"
  18.      inline="{{false}}"
  19.      >
  20.      </c-tab>
  21.      <c-tab-pane tabs="{{tabs}}"  active-label="{{activeLabel}}">
  22.        <!-- 案例1 -->
  23.        <!-- <c-tab-pane-item c-for="{{tabs}}" >
  24.          <slot><text>{{item.label}}</text></slot>
  25.        </c-tab-pane-item> -->
  26.        <!-- 案例2 -->
  27.        <c-tab-pane-item>
  28.          <view class="one"><text>
  29.            1
  30.            </text></view>
  31.        </c-tab-pane-item>
  32.        <c-tab-pane-item>
  33.          <view class="two"><text>
  34.            2
  35.            </text></view>
  36.        </c-tab-pane-item>
  37.        <c-tab-pane-item>
  38.          <view class="three"><text>
  39.            3
  40.            </text></view>
  41.        </c-tab-pane-item>
  42.        <c-tab-pane-item>
  43.          <view><text>
  44.            4
  45.            </text></view>
  46.        </c-tab-pane-item>
  47.      </c-tab-pane>
  49.   </view>
  50. </page>
  51. </template>
  53. <script>
  54. /***
  55.  * prefixStyle  suffixStyle 可以用来放置图标
  56. */
  57. class CTab {
  58.   data = {
  59.     headerTitle: 'c-tabs',
  60.     headerDesc: 'c-tabs',
  61.     tabsAlone:[{
  62.       label:'label11',
  63.       // prefixStyle:"width:50cpx;height:20cpx;background-color:red;",
  64.     },{
  65.       label:"label22",
  66.       // suffixStyle:"width:50cpx;height:20cpx;background-color:red;"
  67.     },{
  68.       label:'label33',
  69.     }],
  70.     activeLabelAlone:'label33',
  71.     tabs:[{
  72.       label:'label1',
  73.       // prefixStyle:"width:50cpx;height:20cpx;background-color:red"
  74.     },{
  75.       label:"label2",
  76.       // suffixStyle:"width:50cpx;height:20cpx;background-color:red"
  77.     },{
  78.       label:'label3',
  79.       // labelStyle:"color:green"
  81.     }],
  82.     activeLabel:'label3',
  83.   }
  84.   methods = {
  85.     handleTabTap(e){
  86.       console.log(e);
  87.       this.activeLabel = e.detail.label;
  88.     },
  89.     handleTabTapAlone(e){
  90.       this.activeLabelAlone = e.detail.label;
  91.     }
  92.   }
  93. }
  94. export default new CTab();
  95. </script>
  96. <script cml-type="json">
  97. {
  98.   "base":{
  99.      "usingComponents": {
  100.           "c-tab": "cml-ui/components/c-tab/c-tab",
  101.           "c-tab-pane": "cml-ui/components/c-tab-pane/c-tab-pane",
  102.           "c-tab-pane-item": "cml-ui/components/c-tab-pane-item/c-tab-pane-item"
  103.       }
  104.   }
  105. }
  106. </script>
  107. <style scoped>
  108. .container {
  109.   flex: 1;
  110.   background: #f8f8f8;
  111. }
  112. .title{
  113.   display:flex;
  114.   flex-direction:row;
  115.   justify-content:center;
  116.   line-height: 88cpx;
  117.   font-size: 28cpx;
  118.   text-align: center;
  119.   height: 88cpx;
  120.   color: #999;
  121. }
  122. .one{
  123.   color:#fff;
  124.   height:500cpx;
  125.   background-color:rgb(46, 240, 127);
  126. }
  127. .two{
  128.   color:#fff;
  129.   height:500cpx;
  130.   background-color:rgb(0, 162, 255);
  131. }
  132. .three{
  133.   color:#fff;
  134.   height:500cpx;
  135.   background-color:#00ffe4;
  136. }
  137. </style>

c-tab - 图1wx

c-tab - 图2web

c-tab - 图3native