### 插件说明
>支持静态tab、滑动tab以及swiper联动

* * *
### 示例
目录：uni_modules/k-tabs-swiper/components/example

### 使用说明
##### 1、基本用法
- 视图
```
<k-tabs-swiper
    v-model="current"
    :tabs="tabs"
    bgColor="#1EBB81"
    color="rgba(255,255,255,0.8)"
    activeColor="#FFFFFF"
    fontSize="28rpx"
    :bold="true"
    :scroll="true"
    height="100rpx"
    lineHeight="10rpx"
    @change="changeTab"
    paddingItem="0 50rpx"
    />
```
- 脚本
```
current: 0,
tabs:['新闻', '早报', '军事', '生活', '地区事件', '文化', '军事', '国内', '新闻'],
```
##### 2、胶囊用法
- 视图
```
<k-tabs-swiper
v-model="current" 
:tabs="tabs" 
:pills="true"
bgColor="#1EBB81"
color="rgba(255,255,255,0.8)"
activeColor="#FFFFFF"
fontSize="28rpx"
pillsColor="red"
:bold="true"
pillsBorderRadius="100rpx"
height="100rpx"
:lineScale="0.8"
@change="changeTab"
paddingItem="0 50rpx"
/>
```
- 脚本
```
data() {
        return {
            current: 0,
            tabs:['新闻', '早报', '军事', '生活', '地区事件', '文化', '军事', '国内', '新闻'],
        }
    }
```
##### 3、自定义下划线
- 视图
```
<k-tabs-swiper
v-model="current"
:tabs="tabs"
:pills="true"
bgColor="#1EBB81"
color="rgba(255,255,255,0.8)"
activeColor="#FFFFFF"
fontSize="28rpx"
pillsColor="red"
:bold="true"
pillsBorderRadius="100rpx"
height="100rpx"
@change="changeTab"
paddingItem="0 50rpx"
:lineSlot="true"
>
    <image
        class="line_img" slot="line"
        src="../../static/k-tabs-swiper/img.png"
        mode="scaleToFill"
    />
</k-tabs-swiper>
```
- 脚本
```
data() {
        return {
            current: 0,
            tabs:['新闻', '早报', '军事', '生活', '地区事件', '文化', '军事', '国内', '新闻'],
        }
    }
```
##### 4、tabs与swiper联动
- 视图
```
<k-tabs-swiper
v-model="current"
:tabs="tabs"
:tabsSwiper="true"
bgColor="#1EBB81"
color="rgba(255,255,255,0.8)"
activeColor="#FFFFFF"
fontSize="28rpx"
lineColor="#FFFFFF"
:bold="true"
:scroll="true"
:fixed="true"
height="100rpx"
lineHeight="10rpx"
@change="changeTab"
@load="load"
paddingItem="0 50rpx"
>
<template slot="swiperContent" slot-scope="{index}">
    <view class="item" :class="{
        'item-active': itemIndex % 2
    }" v-for="(item,itemIndex) in tabsLists[index]" :key="itemIndex">
        {{itemIndex}}
    </view>
    <view class="loading">触发到底部自行填充数据</view>
</template>
</k-tabs-swiper>
```
- 脚本
```
export default{
    data() {
        return {
            current: 0,
            tabs:['新闻', '早报', '军事', '生活', '地区事件', '文化', '军事', '国内', '新闻'],
            tabsLists:[],
            isListFinished: [],
        }
    },
    onLoad(options) {
        this.init();
    },
    methods: {
        //此为测试用方法
        init(){
            this.tabsLists = new Array(20).fill([]);
            this.tabs.forEach((item,index) => {
                this.isListFinished.push({
                    canLoad:true,
                    pageNum:0,
                    pageSize:20
                });
            })
            this.changeTab(0);
        },
        getData(index){
            let newArr = new Array(20).fill([]);
            this.$set(this.tabsLists,index,this.tabsLists[index].concat(newArr))
        },
        load(index){
            this.isListFinished[index].pageNum++;
            uni.showToast({
                title: `第${index}个触发底部，页码${this.isListFinished[index].pageNum}`,
                icon: 'none',
            })
            this.getData(index)
        },
        changeTab(index){
            uni.showToast({
                title: `第${index}个`,
                icon: 'none',
            })
            this.getData(index)
        }
    },
}
```

### 文档说明

* * *
##### 1、属性说明

参数|类型|默认值|说明 
-|-|-|-
tabs | Array | [] | 控制 tab 的列表
value|Number|0|必传(双向绑定的值)
color|String|'#333'|默认文字颜色
activeColor|String|'#2979ff'|选中文字的颜色
fontSize|String|'28rpx'|默认文字大小
activeFontSize|String|'28rpx'|选中文字大小
bold|Boolean|true|是否加粗选中项
scroll|Boolean|true|是否显示滚动条，平铺设置 false
height|String|'70rpx'|tab 高度(rpx 或 px)
lineHeight|String|'10rpx'|滑块高度(rpx 或 px)
lineColor|String|'#2979ff'|滑块的颜色
lineScale|Number|0.5|滑块宽度缩放值
lineRadius|String|'10rpx'|滑块圆角宽度
pills|Boolean|false|是否开启胶囊
pillsColor|String|'#2979ff'|胶囊背景颜色
pillsBorderRadius|String|'10rpx'|胶囊圆角宽度
field|String|''|如果 tabs 子项是对象，输入需要展示的键名
bgColor|String|'#fff'|背景色，支持 linear-gradient 渐变
padding|String|'0'|整个 tab padding 属性
fixed|Boolean|false|是否固定在顶部
paddingItem|String|'0 22rpx'|选项的边距（设置上下不生效，需要设置高度）
lineAnimation|Boolean|true|是否需要 line 和 pills 的动画，在隐藏页面后默认移动到第一个的时候比较实用
zIndex|Number|1993|控制 tab 的层级，默认1993
lineSlot|Boolean|false|是否自定义底部滑块
tabsSwiper|Boolean|false|是否使用swiper
paddingBottom|String|'0rpx'|swiper下边padding
duration|Number|500|swiper滑动动画时长
contentHeight|String|''|swiper内容高度
swiperType|Boolean|false|swiper类型-因为过多swiper会出现性能问题，因此增加了替代方案，可自行选择
circular|Boolean|false|是否采用衔接滑动，即播放到末尾后重新回到开头	


##### 2、事件说明
名称|参数|说明
-|-|-
change | index | 改变tab选中项触发, index 选中项的下标
load | index | swiper触底