laravel_swoole/resources/mobile/components/sc-tabbar

sc-tabbar 组件

功能完善的移动端底部导航栏组件，基于 Vue 3 + Composition API 开发。

功能特性

• ✅ 支持自定义图标（iconfont）
• ✅ 支持徽标显示（badge）
• ✅ 支持红点显示（dot）
• ✅ 支持自定义主题色
• ✅ 支持底部安全区适配
• ✅ 支持 v-model 双向绑定
• ✅ 支持固定定位
• ✅ 支持自定义图标插槽
• ✅ 流畅的过渡动画

安装使用

由于项目已配置 easycom 组件自动引入，无需手动 import，直接在模板中使用即可。

<template>
  <sc-tabbar
    v-model="currentTab"
    :list="tabList"
    @change="handleTabChange"
  />
</template>

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

const currentTab = ref(0)

const tabList = ref([
  {
    text: '首页',
    iconPath: 'home',
    selectedIconPath: 'home-fill'
  },
  {
    text: '消息',
    iconPath: 'message',
    selectedIconPath: 'message-fill',
    badge: '5'
  }
])

const handleTabChange = (index, item) => {
  console.log('切换到 tab:', index, item)
}
</script>

Props 属性

属性名	类型	默认值	说明
list	Array	[]	tab 列表数据
modelValue	Number	0	当前选中的索引（v-model 绑定）
fixed	Boolean	true	是否固定在底部
safeAreaInsetBottom	Boolean	true	是否开启底部安全区适配
activeColor	String	'#007AFF'	选中颜色
inactiveColor	String	'#999999'	未选中颜色
bgColor	String	'#FFFFFF'	背景颜色
borderColor	String	'#E5E5E5'	边框颜色
customClass	String	''	自定义类名

list 数据结构

{
  text: '首页',              // tab 文本
  iconPath: 'home',          // 未选中图标（iconfont 类名）
  selectedIconPath: 'home-fill',  // 选中图标（iconfont 类名）
  badge: '5',                // 徽标数字（可选）
  dot: true,                 // 是否显示红点（可选）
  pagePath: '/pages/index/index'  // 跳转路径（可选）
}

Events 事件

事件名	参数	说明
update:modelValue	index	当前选中索引更新时触发
change	(index, item)	tab 切换时触发
click	(index, item)	点击 tab 时触发

Slots 插槽

插槽名	说明	参数
icon	自定义图标内容	{ item, index, active }

使用示例

基础用法

<template>
  <sc-tabbar
    v-model="currentTab"
    :list="tabList"
  />
</template>

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

const currentTab = ref(0)

const tabList = ref([
  { text: '首页', iconPath: 'home', selectedIconPath: 'home-fill' },
  { text: '发现', iconPath: 'compass', selectedIconPath: 'compass-fill' },
  { text: '我的', iconPath: 'user', selectedIconPath: 'user-fill' }
])
</script>

显示徽标

<template>
  <sc-tabbar
    v-model="currentTab"
    :list="tabList"
  />
</template>

<script setup>
const tabList = ref([
  { 
    text: '首页', 
    iconPath: 'home', 
    selectedIconPath: 'home-fill' 
  },
  { 
    text: '消息', 
    iconPath: 'message', 
    selectedIconPath: 'message-fill',
    badge: '5'  // 显示徽标数字
  },
  { 
    text: '我的', 
    iconPath: 'user', 
    selectedIconPath: 'user-fill',
    dot: true  // 显示红点
  }
])
</script>

自定义主题色

<template>
  <sc-tabbar
    v-model="currentTab"
    :list="tabList"
    active-color="#FF6B6B"
    inactive-color="#CCCCCC"
    bg-color="#2C3E50"
    border-color="#34495E"
  />
</template>

自定义图标插槽

<template>
  <sc-tabbar
    v-model="currentTab"
    :list="tabList"
  >
    <template #icon="{ item, index, active }">
      <!-- 自定义图标内容 -->
      <image 
        :src="active ? item.selectedIconPath : item.iconPath" 
        mode="aspectFit"
        style="width: 48rpx; height: 48rpx;"
      />
    </template>
  </sc-tabbar>
</template>

页面跳转

<template>
  <sc-tabbar
    v-model="currentTab"
    :list="tabList"
    @change="handleTabChange"
  />
</template>

<script setup>
const tabList = ref([
  {
    text: '首页',
    iconPath: 'home',
    selectedIconPath: 'home-fill',
    pagePath: '/pages/index/index'
  },
  {
    text: '发现',
    iconPath: 'compass',
    selectedIconPath: 'compass-fill',
    pagePath: '/pages/discover/index'
  }
])

const handleTabChange = (index, item) => {
  if (item.pagePath) {
    // 如果是 tabBar 页面
    uni.switchTab({
      url: item.pagePath,
      fail: () => {
        // 如果不是 tabBar 页面，使用 navigateTo
        uni.navigateTo({
          url: item.pagePath
        })
      }
    })
  }
}
</script>

配置 pages.json

如果需要在 tabBar 中配置页面，需要在 pages.json 中配置：

{
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#007AFF",
    "backgroundColor": "#FFFFFF",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/icons/home.png",
        "selectedIconPath": "static/icons/home-active.png"
      },
      {
        "pagePath": "pages/discover/index",
        "text": "发现",
        "iconPath": "static/icons/compass.png",
        "selectedIconPath": "static/icons/compass-active.png"
      }
    ]
  }
}

注意事项

1. 图标字体：组件默认使用 iconfont 图标库，请确保已引入对应的图标字体文件
2. 页面跳转：建议在 pages.json 中配置 tabBar 页面，使用 uni.switchTab 跳转
3. 徽标显示：badge 和 dot 不能同时设置，优先显示 badge
4. 安全区适配：iPhone X 及以上设备会自动适配底部安全区
5. fixed 定位：设置为 fixed 时，组件会固定在页面底部

完整示例

查看 resources/mobile/pages/example/tabbar/index.vue 获取完整的使用示例。

License

MIT