更新记录

1.0.0（2025-11-12） 下载此版本

初次版本。

平台兼容性

uni-app(4.03)

uni-app x(4.03)

其他

zmt-tabbar

UniApp TabBar插件，提供底部导航栏功能，支持自定义样式和购物车角标显示。

功能特点

• 提供五个固定选项卡：首页、产品、客服、购物车、我的
• 支持自定义选中状态样式
• 支持自定义图标和文字颜色
• 支持购物车图标显示未读消息数量
• 支持自定义TabBar高度和背景色

安装方式

在UniApp项目中，通过以下方式安装：

1. 将插件文件夹复制到项目的uni_modules目录下
2. 在页面中引入组件

使用方法

1. 在页面中引入组件

<template>
  <view class="container">
    <!-- 页面内容 -->

    <!-- 引入TabBar组件 -->
    <zmt-tabbar 
      :current="currentTab"
      :activeColor="'#007aff'"
      :inactiveColor="'#8e8e93'"
      :tabBarHeight="50"
      :iconSize="24"
      :textSize="10"
      :backgroundColor="'#ffffff'"
      :showCartBadge="true"
      :cartBadge="cartCount"
      @change="onTabChange"
    ></zmt-tabbar>
  </view>
</template>

<script>

export default {
  data() {
    return {
      currentTab: 0,
      cartCount: 5
    }
  },
  methods: {
    onTabChange(index) {
      console.log('切换到标签页:', index);
      this.currentTab = index;
    }
  }
}
</script>

<style>
.container {
  padding-bottom: 50px; /* 为TabBar留出空间 */
}
</style>

2. 在App.vue中全局配置

<script>
import zmtTabbar from '@/uni_modules/zmt-tabbar/components/zmt-tabbar/zmt-tabbar.vue';

export default {
  components: {
    zmtTabbar
  },
  // ...其他配置
}
</script>

配置选项

事件

注意事项

1. 使用时需要在页面底部留出足够的空间，避免内容被TabBar遮挡
2. 需要在项目中创建对应的页面文件，否则切换会失败
3. 图标文件需要放置在static目录下，并在组件中正确引用

页面结构示例

pages/
  ├── index/
  │   └── index.vue     // 首页
  ├── product/
  │   └── product.vue   // 产品页
  ├── service/
  │   └── service.vue   // 客服页
  ├── cart/
  │   └── cart.vue      // 购物车页
  └── user/
      └── user.vue      // 我的页面

更新日志

v1.0.0

• 初始版本发布
• 支持五个固定选项卡
• 支持自定义样式和购物车角标显示