更新记录

1.2.1(2019-11-27)

新增选项宽度相等方法 新增选中字体颜色、大小、默认字体大小 方法 新增下划线自定义长度方法 新增选项卡固定定位 自定义top

1.1.1(2019-11-25)

解决页面初加载 current 不为0 为其他值 选项卡不会滚到指定位置bug

1.1.0(2019-11-20)

新增选项会内容滚动而滚动

查看更多

平台兼容性

1.使用方式

scrollFlag --是否开启选项滚动(true -开启 false -关闭) 根据自己需求如果选项长度超出屏幕长度 建议开启

fixed --固定定位

bgc --背景色

values --选项数组

current --当前选中选项索引

isEqually --是否开启选项平分宽度(true,false)

lineWidth --下划线长度(在非平分选项状态下 可能会影响选项盒子的宽度-自行调试想要的效果,默认为48rpx)

itemSize --未选中选项字体大小(默认为30rpx)

activeSize --选中选项字体大小(默认为32rpx)

activeColor --选中选项字体颜色(默认#333)

top --选项卡固定定位 自定义top距离

<template>
    <view class="page">
        <tabControl :current="current" :values="items" bgc="#fff" :fixed="true" :scrollFlag='true' :isEqually='true' @clickItem="onClickItem" ></tabControl>
        <!-- 使用 swiper 配合 滑动切换 -->
        <swiper class="swiper" style="height: 100%;" @change='scollSwiper' :current='current'>
            <swiper-item v-for="(item,index) in items" :key='index'>
                <!-- 使用 scroll-view 来滚动内容区域 -->
                <scroll-view scroll-y="true" style="height: 100%;">{{ item }}</scroll-view>
            </swiper-item>
        </swiper>
    </view>
</template>
import tabControl from '@/components/tabControl-tag/tabControl-tag.vue';
export default {
    components: { tabControl },
    data() {
        return {
            items: ['选项卡1', '选项卡2', '选项卡3'],
            current: 0
        };
    },
    onLoad() {},
    methods: {
        onClickItem(val) {
            this.current = val.currentIndex
        },
        scollSwiper(e){
            this.current = e.target.current
        }
    }
};

-----style
page{
    height: 100%;
}
.page{
    padding-top: 98rpx;
    height: 100%;
}

注意:

使用fixed固定头部的时候 要将页面整体padding-top:98rpx;不然会盖住内容区域。

使用swiper实现滑动切换时  要将page 高度设置100%  swiper高度100% 才可以全屏滑动切换

隐私、权限声明

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

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

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

许可协议

MIT协议

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