更新记录
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% 才可以全屏滑动切换