AnimatedTab 选项卡组件

渲染出一个带过渡动画带选项卡

特殊说明

  • 支持受控/非受控

安装

npm install @qnpm/q-animatedTab --save --registry=http://npmrepo.corp.qunar.com

使用说明

显示代码

import AnimatedTab from '@qnpm/q-animatedTab';

const renderBaseTab = (props) => {
    const [
        selected,
        setSelected
    ] = useState(props.selectedIndex);
    return (
      <View>
          <AnimatedTab
            {...props}
            selectedIndex={selected}
            onClickItem={(index, selected) => {
                setSelected(index);
            }}
          />
      </View>
    );
};

    const itemList = [
        {text: '酒店'},
        {text: '机票'},
        {text: '门票'},
        {text: '一日游'}];
    return (
      <View style={[styles.container]}>
          <TextSplit text={"基础"}/>
          {
              renderBaseTab({
                  itemList
              })
          }
          <TextSplit text={"宽度相等"}/>
          {
              renderBaseTab({
                  itemList,
                  equantLayout: 'equalWidth'
              })
          }
          <TextSplit text={"间距相等"}/>
          {
              renderBaseTab({
                  itemList,
                  equantLayout: 'equalSpacing'
              })
          }
          <TextSplit text={"自定义样式"}/>
          {
              renderBaseTab({
                  itemList,
                  customStyle: {
                      wrapperStyle: {
                          backgroundColor: '#eee'
                      },
                      itemStyle: {
                          color: '#000',
                          unselectedColor: '#ccc'
                      }
                  }
              })
          }
      </View>
    )

显示代码

import AnimatedTab from '@qnpm/q-animatedTab';

const renderBaseTab = (props) => {
    const [
        selected,
        setSelected
    ] = useState(props.selectedIndex);
    return (
      <View>
          <AnimatedTab
            {...props}
            selectedIndex={selected}
            onClickItem={(index, selected) => {
                setSelected(index);
            }}
          />
      </View>
    );
};
    const itemList = [
        {text: '酒店'},
        {text: '机票'},
        {text: '门票'},
        {text: '门票2'},
        {text: '门票3'},
        {text: '门票4'},
        {text: '一日游'}];
    return (
      <View style={[styles.container]}>
          <TextSplit text={"基础"}/>
          {
              renderBaseTab({
                  itemList
              })
          }
          <TextSplit text={"默认展示更多-黑色遮罩"}/>
          {
              renderBaseTab({
                  itemList,
                  onClickMoreItem: () => {
                      console.log('click more');
                  },
                  darkMask: true
              })
          }
          <TextSplit text={"默认展示更多-白色遮罩"}/>
          {
              renderBaseTab({
                  itemList,
                  onClickMoreItem: () => {
                      console.log('click more');
                  }
              })
          }
      </View>
    )

显示代码

import AnimatedTab from '@qnpm/q-animatedTab';

const renderBaseTab = (props) => {
    const [
        selected,
        setSelected
    ] = useState(props.selectedIndex);
    return (
      <View>
          <AnimatedTab
            {...props}
            selectedIndex={selected}
            onClickItem={(index, selected) => {
                setSelected(index);
            }}
          />
      </View>
    );
};

    const itemList = [
        {text: '酒店'},
        {text: '机票'},
        {text: '门票'}];
    return (
      <View style={[styles.container]}>
          <TextSplit text={"基础受控"}/>
          {
              renderBaseTab({
                  itemList,
                  selectedIndex: 1
              })
          }
          <TextSplit text={"基础非受控"}/>
          {/* @ts-ignore */}
          <AnimatedTab
            itemList={itemList}
            onClickItem={(index, selected) => {
                console.log(index, selected)
            }}
          />
      </View>
    )

属性说明

属性名 类型 默认值 是否必须 说明
customStyle wrapperStyle|itemStyle undefined false 部分支持自定义style
darkMask boolean false false 是否黑色遮罩颜色，默认false，为白色
equantLayout equalWidth|equalSpacing undefined false 等分布局类型，默认不等分
itemList AnimatedTabItem[] - true tab名称列表
needScale boolean false false 是否支持按照屏幕尺寸缩放
onClickItem (index: number, selected: boolean, item: AnimatedTabItem) => void undefined false 点击item回调，index为点击索引，selected为点击时item是否选中, item为传入item
onClickMoreItem () => void undefined false 点击更多回调，只有横向放不下且此props不为undefined时才显示
selectedIndex number 0 false 外部传入选中的索引，半受控形式

customStyle 说明

wrapperStyle仅可以修改以下样式：flex | width | backgroundColor | padding | margin itemStyle

属性名 类型 默认值 是否必须 说明
color string gray1 false 选中情况字色
unselectedColor string gary2 false 未选中情况字色
widgetColors string[] ['#99F8FF', '#00EEFF'] false 滑块渐变色，仅支持两个色值
spacing number undefined false item之间的间距，默认30，等分下无效

AnimatedTabItem 说明

属性名 类型 默认值 是否必须 说明
text string - true tab标题，必传
[key: string] any - false 自定义字段

equantLayout 说明

'equalWidth' // 宽度相等 
'equalSpacing' // 间距相等
web组件说明
Bottombar