@ctmobile/ui-tab-sd

1.0.1 • Public • Published

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类的对象 [Object]direction {String} - tab页卡的方向 [horizontal | vertical] | | {String} - initialSlide | 初始化的索引 |

例子

html

js

方法

slideTo( index, ) - 跳转到指定页面

  • index-string 索引

appendSlide( indicatorObj, contentObj, impls, ) - 追加指定的slide

  • indicatorObj-Object 指示器配置
  • contentObj-Object 卡片配置
  • impls-Function/Array 卡片实现类

prependSlide( indicatorObj, contentObj, impls, ) - 向前追加指定的slide

  • indicatorObj-Object 指示器配置
  • contentObj-Object 卡片配置
  • impls-Function/Array 卡片实现类

addSlide( index, indicatorObj, contentObj, impls, ) - 在指定位置追加指定的slide

  • index-number 索引
  • indicatorObj-Object 指示器配置
  • contentObj-Object 卡片配置
  • impls-Function/Array 卡片实现类

removeSlide( slideIndex, ) - 在指定索引处删除Slide

  • slideIndex-number 索引

getCount() - 获取卡片数量

事件

名称 说明
create 创建
beforeShow 显示
beforeClose 隐藏之前

Package Sidebar

Install

npm i @ctmobile/ui-tab-sd

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

42.4 kB

Total Files

5

Last publish

Collaborators

  • playerljc