文档

纵向标签页(VTabs)

更新时间:

纵向选项卡,配合 VTabItem 使用。

说明

目前仅支持一个页面中使用一次 VTabs 组件。

属性

VTabs

属性

类型

必填

默认值

说明

index

number

0

当前激活的索引

className

string

-

类名

VTabsItem

属性

类型

必填

默认值

说明

tab

{title: string; disabled?: boolean, badge?: {type: 'dot' | 'number' | 'text', text: number | string }}[]

-

每一项 tab 内容

className

string

-

类名

事件

VTabs

事件名

说明

类型

onChange

面板切换时候,触发回调

(index: number) => void

插槽

VTabs

名称

说明

类型

title

自定义标题内标题样式

作用域插槽

icon

自定义标题内图标样式

作用域插槽

样式类

VTabs

类名

说明

amd-vtabs

整体样式

amd-vtabs-bar

左侧标题区域样式

amd-vtabs-bar-scroll-view

左侧标题区域样式

amd-vtabs-bar-item-wrap

左侧标题样式

amd-vtabs-bar-item

左侧标题样式

amd-vtabs-bar-item-active

标题激活状态样式

amd-vtabs-bar-item-disabled

标题禁用状态样式

amd-vtabs-bar-item-title

标题内 title 的样式

amd-vtabs-bar-item-count

标题内 badge 的样式

amd-vtabs-bar-item-icon

标题内 icon 插槽的样式

amd-vtabs-content

右侧内容区域样式

amd-vtabs-content-slides

右侧单个内容区域样式

VTabItem

类名

说明

amd-vtabs-item

整体样式

代码示例

VTabs 的基本使用示例如下:

index.axml 的代码示例如下:

<vtabs 
  index="{{index}}"
  onChange="onChange">
  <view slot="title" slot-scope="prop">
    {{prop.tab.title}}
  </view>

  <view slot="icon" slot-scope="prop" a:if="{{prop.tab.title === '内容 6'}}">
    <view class="badge"/>
  </view>

  <view slot="icon" slot-scope="prop" a:if="{{prop.tab.title === '内容 7'}}">
    <view class="icon">
      <icon type="FireFill"/>
      </view>
  </view>

  <vtab-content 
    className="vtabItem {{getVtabIndex + 1 === 1 ? 'currentItem': ''}}"
    tab="{{{title: '内容 1'}}}">
    <text>content of 内容 1</text>
  </vtab-content>

  <vtab-content 
    className="vtabItem {{getVtabIndex + 1 === 2 ? 'currentItem': ''}}"
    tab="{{{title: '内容过长', count: 23}}}">
    <text>content of 内容 2</text>
  </vtab-content>

  <vtab-content 
    className="vtabItem {{getVtabIndex + 1 === 3 ? 'currentItem': ''}}"
    tab="{{{title: '内容 3', disabled: true}}}">
    <view
      onTap="changeHeight"
      style="{{newHeight? `display: block;height: ${newHeight}vh`: ''}}">
      content of 内容 3
    </view>
  </vtab-content>

  <vtab-content 
    className="vtabItem {{getVtabIndex + 1 === 4 ? 'currentItem': ''}}"
    tab="{{{title: '内容 4', count: 999, disabled: true}}}">
    <text>content of 内容 4</text>
  </vtab-content>

  <vtab-content 
    className="vtabItem {{getVtabIndex + 1 === 5 ? 'currentItem': ''}}"
    tab="{{{title: '内容 5'}}}">
    <text>content of 内容 5</text>
  </vtab-content>

  <vtab-content 
    className="vtabItem {{getVtabIndex + 1 === 6 ? 'currentItem': ''}}"
    tab="{{{title: '内容 6', badge: { type: 'text', text: '优惠'}}}}">
    <text>content of 内容 6</text>
  </vtab-content>

  <vtab-content 
    className="vtabItem {{getVtabIndex + 1 === 7 ? 'currentItem': ''}}"
    tab="{{{title: '内容 7', badge:{type:'dot'}}}}">
    <text>content of 内容 7</text>
  </vtab-content>
</vtabs>

index.js 的代码示例如下:

Page({
  data: {
    index: 3,
    getVtabIndex: 0,
    newHeight: 100,
  },
  onLoad() {
    this.setData({
      getVtabIndex: this.data.index,
    });
  },
  onChange(idx) {
    this.setData({
      getVtabIndex: idx,
      index: idx,
    });
  },
  changeHeight() {
    this.setData({
      newHeight: this.data.newHeight + 20,
    });
  },
});

index.acss 的代码示例如下:

.vtabItem {
  transition: all 200ms linear;
  background-color: #fff;
}

.currentItem {
  color: #f00;
  background-color: #fff;
}

.vtabItem text {
  display: block;
  height: 100vh;
}
.badge {
  background: #ff411c;
  height: 9px;
  width: 9px;
  border-radius: 50%;
}
.badge-num {
  background: #ff411c;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 9px;
}

.icon .amd-icon {
  font-size: 14px;
  color: #ff411c;
}

index.json 的代码示例如下:

{
  "defaultTitle": "Vtabs",
  "usingComponents": {
    "vtabs": "antd-mini/es/VTabs/index",
    "vtab-content": "antd-mini/es/VTabs/VTabItem/index",
    "icon": "antd-mini/es/Icon/index"
  },
  "allowsBounceVertical": false
}