更新记录

1.0.8（2021-01-18）

紧急修复padding导致位置不准的问题

1.0.7（2021-01-18）

1. 新增 标识可以使用不同颜色。

2. 修复一些位置不准确的问题。

1.0.6（2021-01-13）

1.修复了一些问题。

2.添加了一个属性 选中时字体大小

平台兼容性

插件安装

tab切换组件 将组件放在自己的组件库里导入即可

注意

请使用一个宽度为100%容器将组件包裹

开启自适应后 将只会在当前可见域滚动，关闭scroll-x,自动计算间距。（只有固定3-4项的情况下使用）

下划线模式下 下划线总在底部，不管给多少高度。给了下划线position属性后，会自动缩短下划线宽度并且居中于当前栏。

复制代码里 script 标签 不被渲染，所以请注意 缺少 script 标签

导入：

import xTab from '@/components/poiuy-xTab/xTab.vue';

属性 attribute

config对象参数

方法 method

示范代码

<template>
<view class="tab-view">
<xTab :value="tabList" @changeTab="changeTab" :config="{color:'#666666',actColor:'#FE4603',size:32,actWeight:'Bold',position:0}"></xTab>
</view>
</template>

script
    import xTab from '@/components/poiuy-xTab/xTab.vue';
    export default {
        components: {
            xTab
        },
        data() {
            return {
                tabList:[{
                    id:1,
                    name:'测试列表(7)'
                },{
                    id:2,
                    name:'测试介绍'
                },{
                    id:3,
                    name:'测试评论(100)'
                }]
            }
        },
        methods: {
            changeTab(e){
                console.log(e);
            }
}
/script

<style>
.tab-view{
    width:100%
}
</style>

[彩蛋提示]

配合swiper 使用 [代码可复制使用]

<template>
        <view class="tab-view">
            <xTab adaptation :value="tabList" :actValue="swiperCurrIndex" @changeTab="changeTab" :config="{color:'#666666',actColor:'#FE4603',size:32,actWeight:'Bold',position:0}"></xTab>
            <view>
                <swiper :current="swiperCurrIndex" @change="swiperChange" :style="{height:swiperHegiht}">
                    <swiper-item v-for="(item,index) of tabList" :key="index">
                    <view :id="'swiper_id_'+index">
                    {{item.name}}
                    </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
</template>

script
    import xTab from '@/components/poiuy-xTab/xTab.vue';
    export default {
        components: {
            xTab
        },
        data() {
            return {
                tabList:[{
                    id:1,
                    name:'测试列表(7)'
                },{
                    id:2,
                    name:'测试介绍'
                },{
                    id:3,
                    name:'测试评论(100)'
                }],
                swiperCurrIndex:0,//swiper当前位置
                swiperHegiht:300, //swiper动态高度
            }
        },
        onLoad:function(){
            this.setSwiperHeight();
        },
        methods: {
            //xTab 组件的切换返回方法
            changeTab(e){
                console.log(e);
                this.swiperCurrIndex = e.index;
            },

            //swiper组件的切换返回值（执行其他的方法只需要在这里执行即可。）
            swiperChange(e) {
                this.swiperCurrIndex = e.detail.current;
                this.setSwiperHeight(); //例如动态获取高
            },
            //动态设置swiper高度
            setSwiperHeight() {
                const that = this;
                let obj = uni.createSelectorQuery().in(this).select("#swiper_id_" + (this.swiperCurrIndex));
                obj.boundingClientRect(function(data) { //data - 各种参数
                    if (data) {
                        //得到px单位的高度，通过px转换rpx的单位换算(加上底部的间距或者存在底部按钮高度合成最后的rpx高度)
                        that.swiperHegiht = data.height * 2 + 110; 
                    }
                }).exec();
            },
}
}
/script

<style>
.tab-view{
    width:100%
}
    swiper {
            min-height: 80vh;
        }
</style>