@ctmobile/ui-tab NPM

Tab

基本布局

<template id="tabtemplate">
  <div class="ct-tab">A
    <!-- 指示器 -->
    <div class="ct-tab-indicator swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <span class="ct-tab-indicator-item-label">...</span>
        </div>
        ...
      </div>

    </div>

    <!-- 卡片 -->
    <div class="ct-tab-content swiper-container">
      <div class="swiper-wrapper">
        <div class="ct-tab-content-item swiper-slide">...</div>
      </div>
    </div>
  </div>
</template>

初始化

 import Tab, { TabItem } from '@ctmobile/ui-tab';
 import '@ctmobile/ui-tab/tab.less';

 class MyTabItem extends TabItem {
   constructor(index) {
     super(index);
   }

   create() {
     console.log(this.index, 'create');
   }

   show() {
     console.log(this.index, 'show');
   }

   beforeHide() {
     console.log(this.index, 'beforeHide');
   }
 }

 const el = document.getElementById('tab');
 const tel = document.getElementById('tabtemplate');

 const myTab = new Tab(el, tel, {
   indicator: {
     position: 'left',
     type: 'average',
     theme: 'oval',
     slidesPerView: 3,
     arrow: false,
   },
   content: {
     mode: 'mulit',
     isSwiper: true,
     direction: 'horizontal',
     tabInstances: [MyTabItem],
   },
   initialSlide: 0,
 });

名称	说明
{HtmlElement} - el	父容器元素
{HtmlElement} - tel	模板元素
{object} - config
* 指示器配置 {object} - config position {String} - 指示器位置 [top	bottom	left	right]type {String} - 指示器的类型 [average(平均)	dynamic(动态)]slidesPerView {Number} - 指示器一个卡片数量 --只有type是dynamic时才生效theme {String} - 指示器的主题 --只有type是average时才生效 [radius(圆角)	oval(椭圆)	normal(正常)]
* 卡片配置 {object} - config mode {String} - 页卡的模式 [single	mulit]isSwiper {Boolean} - 是否可以滑动 --只有mode为mulit时才起作用 [true	false]tabInstances {Array} - tab对应的处理必须是TabItem类的对象 Objectdirection {String} - tab页卡的方向 [horizontal	vertical]
{String} - initialSlide	初始化的索引