Tabs 标签栏

用于展示分类，切换选项卡的场景等。

基本使用

数量较少的标签

<h1>两个标签</h1>
<com-tabs>
    <com-tab value="1">标签1</com-tab>
    <com-tab value="2">标签2</com-tab>
</com-tabs>
<h1>两个标签平铺(自定义子项宽度)</h1>
<com-tabs>
    <com-tab :value="item" 
    v-for="item in 2" :key="item" width="50%">标签{{item}}</com-tab>
</com-tabs>
<h1>3个标签平铺(自定义子项宽度)</h1>
<com-tabs>
    <com-tab :value="item" 
    v-for="item in 3" :key="item" width="33.3%">标签{{item}}</com-tab>
</com-tabs>

数量较多的标签；点击隐藏部分的标签时将会自动居中显示

<h1>多标签溢出屏幕</h1>
<com-tabs :current="1">
    <com-tab :value="item" 
    v-for="item in 10" :key="item">标签{{item}}</com-tab>
</com-tabs>

修改颜色

<h1>修改主题色：</h1>
<com-tabs :current="1" color="red">
    <com-tab :value="item" 
    v-for="item in 10" :key="item">标签{{item}}</com-tab>
</com-tabs>

自定义样式

<h1>自定义样式</h1>
<com-tabs :current="1" class="tabs">
    <com-tab :value="item" 
    v-for="item in 10" :key="item">标签{{item}}</com-tab>
</com-tabs>

<style lang="scss" scoped>
/deep/ .tabs{
    // tab激活样式
    .com-tab__active{
        color: orange;
        font-size: 36rpx;
    }
    // 底部横条样式
    .com-tab-bar{
        background: linear-gradient(to left,orange,yellow) !important;
    }
}
</style>

显示其他内容

<com-tabs>
    <com-tab value="1" width="50%">
        <view class="relative">
            <text>最新</text>
            <com-tag padding="2,10" color="#fff" 
            bgColor="red" height="30" class="num">2</com-tag>
        </view>
    </com-tab>
    <com-tab value="2" width="50%">
        <text>热门</text>
    </com-tab>
</com-tabs>

<style lang="scss" scoped>
	.num{
		font-weight: 400;
		position: absolute;
		right: 30%;
		top: 0;
	}
</style>

API

com-tabs Props

属性名	说明	类型	必填	默认值
current	默认选中项索引值	Number	否	0
width	容器宽度	String	否	750rpx
height	容器高度	String	否	60rpx
color	主题颜色	String	否	#0098FF

com-tabs Events

事件	说明	回调参数
change	切换tab时触发	参数一为选中tab的索引值， 参数二为选中tab绑定的value值

com-tab Props

属性名	说明	类型	必填	默认值
value	tab的唯一标识	—	是	-
name	显示在页面上的文字	String	否	-
width	宽度	String	否	-

com-tab Events

事件	说明	回调参数
click	点击tab时触发	参数一为点击tab的索引值，参数二为tab绑定的value值