TabView

概述[Tab+Child 组件]

<TabView /> Tab+子内容展示组件。

示例代码

import cooApp, { basicWidgets } from 'coolink'

const { TabView } = basicWidgets

export default class TabView extends cooApp.Widget {
  render () {
    return {
        <Container width={ui.screenWidth} flex={1}>
            <TabView
                height={ui.screenHeight - ui.appbarHeight - ui.rpx(200)}
                tabs={[
                    <Container margin={{ left: px(50), right: px(50) }} alignItems='center' justifyContent='center'>
                        <Text >{'历史'}</Text>
                    </Container>,
                    <Container margin={{ left: px(50), right: px(50) }} alignItems='center' justifyContent='center'>
                        <Text>{'收藏'}</Text>
                    </Container>
                ]}
                onChange={(v) => {
                    this.freshTabData(v.index)
                }}
                isScrollable={true}
                labelStyle={{ color: 0xFFFF8228, weight: 'bold', size: ui.rpx(30) }}
                unselectedLabelStyle={{ color: 0xFFFFFFFF, weight: 'normal', size: ui.rpx(30) }}
                indicatorPadding={{ left: ui.rpx(50), right: ui.rpx(50) }}
                indicatorColor={0xFFFF8228}
                indicatorWeight={ui.rpx(10)}
                indicatorCap='square'
                pages={[
                    <Container backgroundColor={0xff151720} alignItems='center' justifyContent='center'>
                        <Text >{'历史展示区域'}</Text>
                    </Container>,
                    <Container backgroundColor={0xff151720} alignItems='center' justifyContent='center'>
                        <Text >{'收藏展示区域'}</Text>
                    </Container>
                ]} />
        </Container>
    }
  }
}

组件属性

属性名	类型	说明	默认值
height	number	组件高度	不为空
tabs	array	组件 tab 的选项（数组）	不为空
isScrollable	Boolean	是否可以滚动	true
labelStyle	Object	选中 lable 样式	不为空
unselectedLabelStyle	Object	选中 lable 样式	不为空
indicatorPadding	Object	展示区域样式	不为空
indicatorColor	Object	展示区域字体颜色	不为空
indicatorWeight	Object	展示区域字体权重	不为空
pages	array	组件 tab 对应的内容（数组）	不为空
onChange	Function	tab 切换事件监听	不为空

---

样例 1

export default class TabView extends cooApp.Widget {
    freshTabData(index:number){
        // do something...
    }
    render () {
        return {
            <Container width={ui.screenWidth} flex={1}>
                <TabView
                    height={ui.screenHeight - ui.appbarHeight - ui.rpx(200)}
                    tabs={[
                        <Container margin={{ left: px(50), right: px(50) }} alignItems='center' justifyContent='center'>
                            <Text >{'历史'}</Text>
                        </Container>,
                        <Container margin={{ left: px(50), right: px(50) }} alignItems='center' justifyContent='center'>
                            <Text>{'收藏'}</Text>
                        </Container>
                    ]}
                    onChange={(v) => {
                        this.freshTabData(v.index)
                    }}
                    isScrollable={true}
                    labelStyle={{ color: 0xFFFF8228, weight: 'bold', size: ui.rpx(30) }}
                    unselectedLabelStyle={{ color: 0xFFFFFFFF, weight: 'normal', size: ui.rpx(30) }}
                    indicatorPadding={{ left: ui.rpx(50), right: ui.rpx(50) }}
                    indicatorColor={0xFFFF8228}
                    indicatorWeight={ui.rpx(10)}
                    indicatorCap='square'
                    pages={[
                        <Container backgroundColor={0xff151720} alignItems='center' justifyContent='center'>
                            <Text >{'历史展示区域'}</Text>
                        </Container>,
                        <Container backgroundColor={0xff151720} alignItems='center' justifyContent='center'>
                            <Text >{'收藏展示区域'}</Text>
                        </Container>
                    ]} />
            </Container>
        }
    }
}

上述例子的效果图：