LimeUI+1.2.0

主题

LimeTabs 选项卡 ​

一个功能丰富的选项卡组件，用于在不同的内容区域之间进行切换，支持：

  • 多种展示方式（等分/滚动）
  • 手势滑动切换
  • 与swiper联动
  • 兼容uniapp/uniappx

插件依赖：lime-shared、lime-badge、lime-style

文档链接 ​

📚 组件详细文档请访问以下站点：

安装方法 ​

  1. 在uni-app插件市场入口 中搜索并导入lime-tabs
  2. 首次导入可能需要重新编译

代码演示 ​

基础使用 ​

通过v-model绑定当前激活标签的索引值，通过list设置选项卡列表。

html
<l-tabs v-model="value" :list="list" />
js
const value = ref(0)
const list = [
    {
        value: 1,
        label: '选项一',
    },
    {
        value: 2,
        label: '选项二',
    },
    {
        value: 3,
        label: '选项三',
    },
    {
        value: 4,
        label: '选项四',
    }
]

使用子组件 ​

除了使用list属性，还可以通过l-tab-panel子组件设置标签内容。

html
<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"取消等分布局，实现横向滚动。

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

徽标提示 ​

支持在标签上显示徽标或小红点，可自定义偏移位置。

html
<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"开启标签内容切换时的转场动画。

html
<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"开启手势左右滑动切换标签页功能。

html
<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事件可以在切换标签前执行特定的逻辑，实现受控切换。

html
<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>
js
const value = ref(1);
const onClick = (index) => {
    // 在切换前执行一些逻辑，如数据校验
    uni.showLoading({title:'校验中'})
    setTimeout(() => {
        uni.hideLoading()
        value.value = index // 手动更新选中的标签
    }, 1000)
}

快速预览 ​

导入插件后，可以直接使用以下标签查看演示效果：

html
<!-- 代码位于 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部分添加以下代码：

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

API文档 ​

Tabs Props ​

参数说明类型默认值
v-model绑定当前选中标签的标识符number0
value当前选中标签的标识符number0
list选项卡列表TabPanelProps[][]
animated是否开启切换标签内容时的转场动画booleanfalse
duration动画时间，单位秒，设置为 0 可以禁用动画number0.3
spaceEvenly选项卡头部空间是否均分booleantrue
swipeable是否开启手势左右滑动切换booleanfalse
split是否展示分割线booleantrue
color标签文本颜色string-
activeColor标签激活文本颜色string-
lineColor底部条颜色string-
lineWidth底部条宽度string-
lineHeight底部条高度string-
bgColor选项卡背景色string-
size组件尺寸，内置'medium', 'large'，如果传具体的值就是设置高度string-
padding标题 paddingstring-
swiperProgress与swiper联动，传入[-1, 1] 范围的滚动进度 uniappx有效number-
syncSwiper是否启用与swiper的同步联动, uniappx有效booleanfalse
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是否禁用booleanfalse
dot是否显示小红点booleanfalse
badge徽标内容string | number-
offset徽标偏移量number[][]

主题定制 ​

组件提供了以下CSS变量用于自定义样式：

名称默认值描述
--l-tab-font-size28rpx标签文字大小
--l-tab-nav-bg-colorwhite导航栏背景色
--l-tab-content-bg-colorwhite导航栏内容背景色
--l-tab-item-height96rpx标签项高度
--l-tab-item-padding-x32rpx标签项内边距
--l-tab-item-padding-y0标签项内边距
--l-tab-item-color$text-color-1标签文字颜色
--l-tab-item-active-color$primary-color激活状态文字颜色
--l-tab-item-disabled-color$text-color-disabled禁用状态文字颜色
--l-tab-split-color$primary-color下划线颜色
--l-tab-track-color$border-color-1指示线颜色
--l-tab-track-height6rpx底部指示线高度
--l-tab-track-width32rpx底部指示线宽度
--l-tab-track-radius8rpx底部指示线圆角

支持与赞赏 ​

如果这个组件对您有帮助，可以考虑支持开发者：

支付宝微信支付

源代码 ​

组件源码