LimeTabs 选项卡

• 标签页选项卡组件，用于在不同的内容区域之间进行切换。兼容uniapp/uniappx
• 插件依赖lime-shared,lime-badge,lime-style不喜勿下

安装

在 导入即可，首次导入可能需要重新编译

文档

tabs

代码演示

基础使用

通过 v-model 绑定当前激活标签对应的索引值，默认情况下启用第一个标签。通过list设置选项卡列表

<l-tabs v-model="value" :list="list" />

const value = ref(0)
const list = [
	{
		value: 1,
		label: '选项',
	},
	{
		value: 2,
		label: '选项',
	},
	{
		value: 3,
		label: '选项',
	},
	{
		value: 4,
		label: '选项',
	}
]

子组件

除了使用list设置列表，还可以通过l-tab-panel子组件设置标签

<l-tabs>
    <l-tab-panel :value="0" label="选项" />
    <l-tab-panel :value="1" label="选项" />
    <l-tab-panel :value="2" label="选项" />
</l-tabs>

标签栏滚动

通过设置space-evenly取消等距，当数量宽度超过父级时可滚动。

<l-tabs :space-evenly="false">
    <l-tab-panel :value="0" label="选项" />
    <l-tab-panel :value="1" label="选项" />
    <l-tab-panel :value="2" label="选项" />
    <l-tab-panel :value="3" label="选项" />
    <l-tab-panel :value="4" label="选项" />
    <l-tab-panel :value="5" label="选项" />
    <l-tab-panel :value="6" label="选项" />
</l-tabs>

徽标

通过设置dot为true可显示小红点，通过设置badge设置徽标内容，通过设置offset设置徽标偏移量。

<l-tabs :space-evenly="false">
    <l-tab-panel :value="0" label="选项" />
    <l-tab-panel :value="1" label="选项" :dot="true" />
    <l-tab-panel :value="2" label="选项" />
    <l-tab-panel :value="3" label="选项" badge="8" :offset="[-8,3]"/>
    <l-tab-panel :value="4" label="选项" />
    <l-tab-panel :value="5" label="选项" />
    <l-tab-panel :value="6" label="选项" />
</l-tabs>

切换动画

通过 animated 属性可以开启切换标签内容时的转场动画。

<l-tabs v-model="value" :space-evenly="false" :animated="true">
    <l-tab-panel :value="0" label="选项">
		<text style="padding: 15px;">选项卡内容1</text>
	</l-tab-panel>
    <l-tab-panel :value="1" label="选项">
		<text style="padding: 15px;">选项卡内容2</text>
	</l-tab-panel>
    <l-tab-panel :value="2" label="选项">
		<text style="padding: 15px;">选项卡内容3</text>
	</l-tab-panel>
    <l-tab-panel :value="3" label="选项">
		<text style="padding: 15px;">选项卡内容4</text>
	</l-tab-panel>
</l-tabs>

滑动切换

通过 swipeable 属性可以开启滑动切换标签页。

<l-tabs v-model="value" :space-evenly="false" :animated="true" :swipeable="true">
    <l-tab-panel :value="0" label="选项">
		<text style="padding: 15px;">选项卡内容1</text>
	</l-tab-panel>
    <l-tab-panel :value="1" label="选项">
		<text style="padding: 15px;">选项卡内容2</text>
	</l-tab-panel>
    <l-tab-panel :value="2" label="选项">
		<text style="padding: 15px;">选项卡内容3</text>
	</l-tab-panel>
    <l-tab-panel :value="3" label="选项">
		<text style="padding: 15px;">选项卡内容4</text>
	</l-tab-panel>
</l-tabs>

受控

通过 onClick 属性可以在切换标签前执行特定的逻辑。

<l-tabs :value="value" @click="onClick">
    <l-tab-panel :value="0" label="选项">
		<text style="padding: 15px;">选项卡内容1</text>
	</l-tab-panel>
    <l-tab-panel :value="1" label="选项">
		<text style="padding: 15px;">选项卡内容2</text>
	</l-tab-panel>
    <l-tab-panel :value="2" label="选项">
		<text style="padding: 15px;">选项卡内容3</text>
	</l-tab-panel>
    <l-tab-panel :value="3" label="选项">
		<text style="padding: 15px;">选项卡内容4</text>
	</l-tab-panel>
</l-tabs>

const value = ref(1);
const onClick = (index: number) => {
	uni.showLoading({title:'校验中'})
	setTimeout(()=>{
		uni.hideLoading()
		value.value = index
	},1000)
}

查看示例

• 导入后直接使用这个标签查看演示效果

 // 代码位于 uni_modules/lime-tabs/compoents/lime-tabs 
<lime-tabs />

插件标签

• 默认 l-tabs 为 component
• 默认 l-tab-panel 为 component
• 默认 lime-tabs 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可.

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API

Tabs Props

参数	说明	类型	默认值
v-model	绑定当前选中标签的标识符	number	0
value	当前选中标签的标识符	number	0
list	选项卡列表	TabPanelProps[]	[]
animated	是否开启切换标签内容时的转场动画	boolean	false
duration	动画时间，单位秒，设置为 0 可以禁用动画	number	0.3
spaceEvenly	选项卡头部空间是否均分	boolean	true
swipeable	是否开启手势左右滑动切换	boolean	false
split	是否展示分割线	boolean	true
color	标签文本颜色	string	-
activeColor	标签激活文本颜色	string	-
lineColor	底部条颜色	string	-
lineWidth	底部条宽度	string	-
lineHeight	底部条高度	string	-
bgColor	选项卡背景色	string	-

TabPanel Props

参数	说明	类型	默认值
value	选项卡的值，唯一标识	number	-
label	选项卡名称	string	-
disabled	是否禁用选项	boolean	false
dot	是否显示标签右上角小红点	boolean	false
badge	标签右上角徽标的内容	string | number	_
offset	徽标偏移	string | number[]	[]

GridItem Events

事件名	说明	回调参数
click	点击标签时触发	index: number
change	当前激活的标签改变时触发	index: number

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式)。uvue app无效。

名称	默认值	描述
--l-tab-font-size:	28rpx	-
--l-tab-nav-bg-color:	white	-
--l-tab-item-height:	96rpx	-
--l-tab-item-padding:	0 32rpx	-
--l-tab-item-color:	$text-color-1	-
--l-tab-item-active-color:	$primary-color	-
--l-tab-item-disabled-color:	$text-color-disabled	-
--l-tab-track-color:	$primary-color	-
--l-tab-track-height:	6rpx	-
--l-tab-track-width:	32rpx	-
--l-tab-track-radius:	8rpx	-

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。

源代码

组件源码