更新记录

1.0.0（2025-04-05） 下载此版本

此版本为初始化版本 后期会更新。

平台兼容性

xl-tabs 标签页组件

一个简单、易用且高度可定制的标签页组件，适用于 uni-app 项目。

特性

• ✨ 简单易用：使用 v-model 轻松控制当前选项卡
• 🚀 切换动画：内置平滑的切换动画和加载状态
• 📊 徽标支持：可显示数字徽标或红点
• 🎨 高度可定制：可自定义样式、固定位置等

安装方式

从插件市场安装（推荐）

在 uni-app 插件市场搜索 "xl-tabs" 并安装。

手动安装

复制 components/xl-tabs 目录到你的项目中。

基本用法

<template>
  <xl-tabs v-model="activeTab" :tabs="tabs" @change="handleTabChange"></xl-tabs>
</template>

<script setup>
import { ref } from 'vue';

const activeTab = ref(0);
const tabs = ref(['选项1', '选项2', '选项3']);

const handleTabChange = (index) => {
  console.log('当前选中的选项卡索引：', index);
};
</script>

带徽标的用法

<template>
  <xl-tabs v-model="activeTab" :tabs="tabsWithBadge" :show-badge="true"></xl-tabs>
</template>

<script setup>
import { ref } from 'vue';

const activeTab = ref(0);
const tabsWithBadge = ref([
  { label: '消息', badge: 5 },
  { label: '联系人', badge: 0 },
  { label: '设置', badge: 12 }
]);
</script>

带加载进度条的用法

在数据加载过程中显示底部进度条动画，提升用户体验：

<template>
  <xl-tabs 
    v-model="activeTab" 
    :tabs="tabs" 
    :show-loading="isLoading"
    @change="handleTabChange">
  </xl-tabs>
</template>

<script setup>
import { ref } from 'vue';

const activeTab = ref(0);
const tabs = ref(['选项1', '选项2', '选项3']);
const isLoading = ref(false);

const handleTabChange = async (index) => {
  // 开始显示加载进度条
  isLoading.value = true;

  try {
    // 执行异步数据加载
    await fetchData(index);
  } finally {
    // 数据加载完成后，隐藏加载进度条
    isLoading.value = false;
  }
};

const fetchData = async (index) => {
  // 模拟数据加载延迟
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`已加载第${index+1}个标签的数据`);
      resolve();
    }, 1500);
  });
};
</script>

属性

事件

样式定制

组件使用 SCSS 编写，你可以通过覆盖以下类名来自定义样式：

• .xl-tabs-container：标签容器
• .xl-tab-item：标签项
• .xl-tab-item.active：活动标签项
• .xl-tab-badge：徽标
• .xl-tab-loading：加载动画

自定义加载进度条样式

:deep(.xl-tab-loading) {
  /* 修改加载条背景 */
  background-color: rgba(0, 0, 0, 0.05);
  height: 6rpx; /* 调整高度 */
}

:deep(.xl-tab-loading .loading-bar) {
  /* 修改加载条颜色 */
  background-color: #ff6b6b;
}

注意事项

• 如果使用对象数组作为 tabs，对象中必须包含 label 属性作为标签文本
• 如果想显示徽标，请将 showBadge 设置为 true，并确保对象中包含相应的徽标属性

示例

自定义样式

<template>
  <xl-tabs 
    v-model="activeTab" 
    :tabs="tabs" 
    tab-class="my-custom-tab" 
    active-tab-class="my-active-tab"
  ></xl-tabs>
</template>

<style lang="scss">
.my-custom-tab {
  font-size: 32rpx;
  color: #333;
}

.my-active-tab {
  color: #ff6b6b;

  &::after {
    background-color: #ff6b6b;
  }
}
</style>

使用红点而不是数字徽标

<template>
  <xl-tabs 
    v-model="activeTab" 
    :tabs="tabsWithBadge"
    :show-badge="true"
    :use-dot="true"
  ></xl-tabs>
</template>

版本历史

1.0.0

• 初始版本发布