更新记录

1.0.8(2021-01-18)

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

1.0.7(2021-01-18)

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

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

查看更多

插件安装

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

注意

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

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

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

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

导入:

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


属性 attribute

属性名 类型 介绍 默认值
value Array 数据列表 []
actValue actValue 当前所在位置(选中)
setField Object 设置对应字段 {id:'id',name:'name'}
adaptation Boolean 是否自适应显示 false
actType String 选中方式(triangle[三角形]/underline[下划线]) underline
config Object 配置对象 已经设置默认值 {}

config对象参数

属性名 类型 介绍 默认值
height Number 组件的高度 80 (rpx)
padding Number 组件的左右间距 30 (rpx)
size Number 文字大小 30 (rpx)
color String 文字颜色(直接传颜色) #FEC1AB
actColor String 选中时的颜色 #1D5397
actIdentityColor String 选中时下面标识的颜色 #1D5397
actSize String 选中时的字体大小 30(rpx)
spacing Number 每一项跟右边的间距 44 (rpx)
position Number 选中标识的位置 0
actWeight String 选中时文字的字重 100

方法 method

方法名 介绍
changeTab 选择之后的返回结果,会返回当前[id/name/index]

示范代码


<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>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问