Tabs 标签页

概述

用于让用户在不同的视图中进行切换。

使用指南

在 .json 中引入组件

  1. "usingComponents": {
  2.     "i-tabs": "../../dist/tabs/index",
  3.     "i-tab": "../../dist/tab/index"
  4. }

示例

  1. 基本用法
  3. <i-tabs current="{{ current }}" bindchange="handleChange">
  4.     <i-tab key="tab1" title="选项1"></i-tab>
  5.     <i-tab key="tab2" title="选项2"></i-tab>
  6.     <i-tab key="tab3" title="选项3"></i-tab>
  7. </i-tabs>
  9. 自定义主题色
  11. <i-tabs current="{{ current }}" color="#f759ab" bindchange="handleChange">
  12.     <i-tab key="tab1" title="选项1"></i-tab>
  13.     <i-tab key="tab2" title="选项2"></i-tab>
  14.     <i-tab key="tab3" title="选项3"></i-tab>
  15. </i-tabs>
  17. 徽标
  19. <i-tabs current="{{ current }}" bindchange="handleChange">
  20.     <i-tab key="tab1" title="选项1" count="3"></i-tab>
  21.     <i-tab key="tab2" title="选项2"></i-tab>
  22.     <i-tab key="tab3" title="选项3" dot></i-tab>
  23. </i-tabs>
  25. 滚动
  27. <i-tabs current="{{ current_scroll }}" scroll bindchange="handleChangeScroll">
  28.     <i-tab key="tab1" title="选项1"></i-tab>
  29.     <i-tab key="tab2" title="选项2"></i-tab>
  30.     <i-tab key="tab3" title="选项3"></i-tab>
  31.     <i-tab key="tab4" title="选项4"></i-tab>
  32.     <i-tab key="tab5" title="选项5"></i-tab>
  33.     <i-tab key="tab6" title="选项6"></i-tab>
  34.     <i-tab key="tab7" title="选项7"></i-tab>
  35.     <i-tab key="tab8" title="选项8"></i-tab>
  36.     <i-tab key="tab9" title="选项9"></i-tab>
  37. </i-tabs>
  1. Page({
  2.     data: {
  3.         current: 'tab1',
  4.         current_scroll: 'tab1'
  5.     },
  7.     handleChange ({ detail }) {
  8.         this.setData({
  9.             current: detail.key
  10.         });
  11.     },
  13.     handleChangeScroll ({ detail }) {
  14.         this.setData({
  15.             current_scroll: detail.key
  16.         });
  17.     }
  18. });

API

Tabs properties

属性说明类型默认值
i-class自定义 class 类名String-
current当前所在的标签的 key 值String-
color主题色String-
scroll是否开启横向滚动Booleanfalse
fixed是否固定在底部Booleanfalse

Tabs events

事件名说明返回值
bind:change切换标签时触发{ key }

Tab properties

属性说明类型默认值
i-class自定义 class 类名String-
key标签的唯一标识String-
title名称String-
dot是否显示小红点Booleanfalse
count徽标数Number0