Tabs 标签

标签组件

使用指南

在 Taro 文件中引入组件

import { ZoTabs } from '@lylb/tzo-ui';

组件依赖的样式文件（仅按需引用时需要）

@import '~@lylb/tzo-ui/dist/style/components/tabs.scss';

一般用法

import Taro from '@tarojs/taro';
import { ZoTabs } from '@lylb/tzo-ui';
export default class Index extends Taro.Component {
  constructor() {
    super(...arguments);
    this.state = {
      tabList: [
        { title: '标签页1' },
        { title: '标签页2' },
        { title: '标签页3' },
        { title: '标签页4' },
        { title: '标签页5' },
        { title: '标签页6' },
        { title: '标签页7' },
      ],
      tabList1: [
        { title: '标签页1' },
        { title: '标签页2', disabled: true },
        { title: '标签页3' },
      ],
      current: 0,
      current1: 0,
    };
  }
  handleClick = (index) => {
    this.setState({
      current: index,
    });
  };
  handleClickDis = (index) => {
    this.setState({
      current1: index,
    });
  };
  render() {
    const { tabList, current, current1, tabList1 } = this.state;
    return (
      <View className="page">
        <View className="doc-body">
          <View className="panel">
            <View className="panel__title">基础用法</View>
          </View>
          <ZoTabs
            tabList={tabList.slice(0, 3)}
            current={current}
            onClick={this.handleClick}
          />
          <View className="panel">
            <View className="panel__title">禁止点击</View>
          </View>
          <ZoTabs
            tabList={tabList1}
            current={current1}
            onClick={this.handleClickDis}
          />
          <View className="panel">
            <View className="panel__title">滚动展示</View>
          </View>
          <ZoTabs
            tabList={tabList}
            current={current}
            scroll
            onClick={this.handleClick}
          />
          <View className="panel">
            <View className="panel__title">吸顶展示</View>
          </View>
          <ZoTabs
            tabList={tabList}
            current={current}
            scroll
            sticky
            onClick={this.handleClick}
          />
        </View>
      </View>
    );
  }
}

参数

参数	说明	类型	可选值	默认值
current	当前选中的标签索引值	number	必填	0
tabList	标签数据源	TabItem[]	必填	[]
scroll	是否开启滚动	boolean	-	false
sticky	是否开启吸顶	boolean	-	false
className	自定义 class 名	string	-	-
customStyle	自定义样式	string/CSSProperties	-	-

TabItem

参数	说明	类型	可选值	默认值
title	标签标题	string	必填	0
disabled	是否禁用/禁止点击	boolean	-	false

事件

事件名称	说明	返回参数
onClick	点击的回调函数	(index:选中标签下标, event: 点击事件, item: 选中标签数据)

TZo UI

Tabs 标签

使用指南

一般用法

参数

TabItem

事件