更新记录
0.2.2(2025-07-11) 下载此版本
- fix: 修复与swiper联动在多标签页滚动问题
0.2.1(2025-06-10) 下载此版本
- feat: 增加
lStyle
自定义节点样式属性
0.2.0(2025-05-30) 下载此版本
- fix: 恢复
label
插槽导出TabPanel
类型
平台兼容性
uni-app(4.44)
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | - | 5.0 | √ | √ |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - | - | - |
uni-app x(4.61)
Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
---|---|---|---|---|---|
√ | √ | 5.0 | √ | √ | √ |
lime-tabs 选项卡
一个功能丰富的选项卡组件,用于在不同的内容区域之间进行切换,支持:
- 多种展示方式(等分/滚动)
- 手势滑动切换
- 与swiper联动
- 兼容uniapp/uniappx
插件依赖:
lime-shared
、lime-badge
、lime-style
文档链接
📚 组件详细文档请访问以下站点:
安装方法
- 在uni-app插件市场中搜索并导入
lime-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 v-model="activeTab">
<l-tab-panel :value="0" label="首页" />
<l-tab-panel :value="1" label="分类" />
<l-tab-panel :value="2" label="购物车" />
</l-tabs>
标签栏滚动
当标签数量较多时,可通过设置:space-evenly="false"
取消等分布局,实现横向滚动。
<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>
徽标提示
支持在标签上显示徽标或小红点,可自定义偏移位置。
<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="通知" badge="8" :offset="[-8,3]"/>
<l-tab-panel :value="3" label="设置" />
</l-tabs>
切换动画
通过:animated="true"
开启标签内容切换时的转场动画。
<l-tabs v-model="value" :animated="true">
<l-tab-panel :value="0" label="选项一">
<view class="content-panel">选项卡内容1</view>
</l-tab-panel>
<l-tab-panel :value="1" label="选项二">
<view class="content-panel">选项卡内容2</view>
</l-tab-panel>
<l-tab-panel :value="2" label="选项三">
<view class="content-panel">选项卡内容3</view>
</l-tab-panel>
</l-tabs>
滑动切换
通过:swipeable="true"
开启手势左右滑动切换标签页功能。
<l-tabs v-model="value" :animated="true" :swipeable="true">
<l-tab-panel :value="0" label="选项一">
<view class="content-panel">向左滑动查看下一个选项</view>
</l-tab-panel>
<l-tab-panel :value="1" label="选项二">
<view class="content-panel">可以左右滑动切换选项</view>
</l-tab-panel>
<l-tab-panel :value="2" label="选项三">
<view class="content-panel">向右滑动查看上一个选项</view>
</l-tab-panel>
</l-tabs>
受控模式
通过@click
事件可以在切换标签前执行特定的逻辑,实现受控切换。
<l-tabs :value="value" @click="onClick">
<l-tab-panel :value="0" label="选项一">
<view class="content-panel">选项卡内容1</view>
</l-tab-panel>
<l-tab-panel :value="1" label="选项二">
<view class="content-panel">选项卡内容2</view>
</l-tab-panel>
<l-tab-panel :value="2" label="选项三">
<view class="content-panel">选项卡内容3</view>
</l-tab-panel>
</l-tabs>
const value = ref(1);
const onClick = (index) => {
// 在切换前执行一些逻辑,如数据校验
uni.showLoading({title:'校验中'})
setTimeout(() => {
uni.hideLoading()
value.value = index // 手动更新选中的标签
}, 1000)
}
快速预览
导入插件后,可以直接使用以下标签查看演示效果:
<!-- 代码位于 uni_modules/lime-tabs/components/lime-tabs -->
<lime-tabs />
插件标签说明
l-tabs
:选项卡容器组件l-tab-panel
:选项卡面板组件lime-tabs
:演示标签
Vue2使用说明
插件使用了composition-api
,请按官方教程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 | - |
size | 组件尺寸,内置'medium', 'large',如果传具体的值就是设置高度 | string | - |
padding | 标题 padding | string | - |
swiperProgress | 与swiper联动,传入[-1, 1] 范围的滚动进度 uniappx有效 | number | - |
syncSwiper | 是否启用与swiper的同步联动, uniappx有效 | boolean | false |
lStyle | 自定义样式 | string|Object | - |
Tabs Events
事件名 | 说明 | 回调参数 |
---|---|---|
click | 点击标签时触发 | index: number |
change | 当前激活标签改变时触发 | index: number |
Tabs Slots 插槽
插槽名称 | 作用域参数 | 说明 |
---|---|---|
label | { item: TabPanel, active: boolean, disabled: boolean } |
自定义标签内容(会覆盖默认的标签渲染逻辑) |
left | - | 导航栏左侧扩展区域(支持固定位置内容,如返回按钮) |
right | - | 导航栏右侧扩展区域(支持固定位置内容,如更多按钮) |
default | - | 内容区域(需配合 <l-tab-panel> 子组件使用或list 属性) |
TabPanel Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
value | 选项卡的唯一标识 | number | - |
label | 选项卡名称 | string | - |
disabled | 是否禁用 | boolean | false |
dot | 是否显示小红点 | boolean | false |
badge | 徽标内容 | string | number | - |
offset | 徽标偏移量 | number[] | [] |
主题定制
样式变量
组件提供了以下CSS变量用于自定义样式:
名称 | 默认值 | 描述 |
---|---|---|
--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 | 底部指示线圆角 |
支持与赞赏
如果这个组件对您有帮助,可以考虑支持开发者:
支付宝 | 微信支付 |
---|---|
![]() |
![]() |