如何设置小程序纵向标签页VTabs_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

纵向选项卡，配合 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
}