更新记录

1.0.6（2025-09-10） 下载此版本

修改上一版引入的错误

1.0.5（2025-09-10） 下载此版本

增加isEventPenetration，解决当外层容器过高遮挡下面元素点击的时有用

1.0.4（2025-09-09） 下载此版本

修复tabbarItemStyle警告

平台兼容性

uni-app(4.07)

hbxw-tabbar自定义tabbar组件

介绍

hbxw-tabbar自定义tabbar组件 当原生tabbar无法满足产品需求的时候我们不得不自定义tabbar，像需要根据不同用户显示不同的tabbar，中间突出的怪异tabbar，那此组件可能适合你。

使用示例

使用前要以新建一个页面拷贝下面代码做一下测试，熟悉后再使用到项目中

<template>
    <view class="conatainer">
    <button @click="tabbarToggle('normal')" :style="{color: tabbarType === 'normal' ? 'green' : '#333'}">标准款式</button>
    <button @click="tabbarToggle('coustom')" :style="{color: tabbarType === 'coustom' ? 'green' : '#333'}">自定义款式</button>

    <!-- 标准使用 -->
        <hbxw-tabbar 
      v-if="tabbarType === 'normal'" 
      :config="tabbar" 
      activeKey="tabbar0"
    ></hbxw-tabbar>

    <!-- 通过插槽自定义tabbar -->
        <hbxw-tabbar 
      v-if="tabbarType === 'coustom'" 
      :config="tabbar" 
      activeKey="tabbar2"
    >
      <template #default="{item, config, index, isActive, bgColor, iconStyleIn, activeIconStyleIn, textStyleIn, activeTextStyleIn, tagStyle}">
        <view class="hbxw-tabbar-item" :style="{height: config.tabbarHeight + 'rpx'}" v-if="item.key !== 'tabbar2'">
          <view class="hbxw-tabbar-itemin" :class="{'hbxw-tabbar-active': isActive}">
            <view class="hbxw-tabbar-icon" :style="isActive ? iconStyleIn : activeIconStyleIn">
              <image
                class="hbxw-tabbar-image"
                :src="isActive ? item.selectedIconPath : item.iconPath "
              />
              <view class="hbxw-tabbar-tag" :style="{tagStyle}" v-if="item.tag">{{typeof item.tag !== 'boolean' ? item.tag : ''}}</view>
            </view>
            <text class="hbxw-tabbar-text" :style="isActive ? activeTextStyleIn : textStyleIn">{{item.text}}</text>
          </view>
        </view>
        <view v-else class="custom-tabbar-item" :style="{'border-style': bgColor, 'background-color': bgColor}">
          <view class="custom-tabbar-item-in">
            <image class="custom-tabbar-icon" :src="isActive ? item.selectedIconPath : item.iconPath" />
            <view class="hbxw-tabbar-tag" :style="{tagStyle}" v-if="item.tag">{{typeof item.tag !== 'boolean' ? item.tag : ''}}</view>
          </view>
        </view>
      </template>
    </hbxw-tabbar>
    </view>
</template>

<script>
    export default {
        data() {
            return {
        tabbarType: 'normal',
        // tabbar配置
                tabbar: {
          "color": "#8a8a8a",
          "selectedColor": "#1f1f1f",
          "borderStyle": "white",
          "backgroundColor": "#ffffff",
          "tabbarHeight": 122,
          "holderHeight": 142,
          "iconStyle": {"width": '60rpx', "height": '60rpx'},
          "activeIconStyle": {"width": '60rpx', "height": '60rpx'},
          "textStyle": {"fontSize": '24rpx'},
          "activeTextStyle": {"fontSize": '24rpx'},
          "list": [
            {
                "pagePath": "pages/home/home",
                "iconPath": "/static/hbxwtabbar/home.png",
                "selectedIconPath": "/static/hbxwtabbar/home_selected.png",
                "text": "首页",
              "key": "tabbar0"
            },
            {
              "pagePath" : "pages/equity/index",
              "iconPath" : "/static/hbxwtabbar/goods.png",
              "selectedIconPath" : "/static/hbxwtabbar/goods_selected.png",
              "text" : "商品",
              "key": "tabbar1",
              "tag": 10
            },
            {
              "pagePath" : "pages/rentAll/index",
              "iconPath" : "/static/hbxwtabbar/activity.png",
              "selectedIconPath" : "/static/hbxwtabbar/activity_selected.png",
              "text" : "活动",
              "key": "tabbar2",
              "tag": true
            },
            {
              "pagePath" : "pages/kefu/index",
              "iconPath" : "/static/hbxwtabbar/customer_service.png",
              "selectedIconPath" : "/static/hbxwtabbar/customer_service_selected.png",
              "text" : "客服",
              "key": "tabbar3"
            },
            {
                "pagePath": "pages/me/me",
                "iconPath": "/static/hbxwtabbar/mine.png",
                "selectedIconPath": "/static/hbxwtabbar/mine_selected.png",
                "text": "我的",
              "key": "tabbar4"
            }
          ]
        }
            }
        },
        methods: {
            tabbarToggle(type){
        this.tabbarType = type
      }
        }
    }
</script>

<style lang="scss">
.conatainer{
  height: 150vh;
  background-color: green;
}
.hbxw-tabbar-item{
    flex:1;
    height: 100%;
    display: flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
  }
  .hbxw-tabbar-itemin{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    &.hbxw-tabbar-active{
      .hbxw-tabbar-text{
        color: red;
      }
    }
  }
  .hbxw-tabbar-icon{
    width: 40rpx;
    height: 40rpx;
    position: relative;
  }
  .hbxw-tabbar-tag{
    position: absolute;
    top: -10rpx;
    right: -10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width:20rpx;
    padding: 0 5rpx;
    box-sizing: border-box;
    height: 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
    line-height: 1em;
    font-size: 10px;
    background-color: red;
    color: #fff;
  }
  .hbxw-tabbar-image{
    width: 100%;
    height: 100%;
  }
  .hbxw-tabbar-text{
    font-size: 18rpx;
    color: #999;
  }
/* 自定义tabbar项 */
.custom-tabbar-item{
  width: 142rpx;
  height: 142rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 10rpx solid white;
  background-color: white;
  box-sizing: border-box;
}
.custom-tabbar-item-in{
  width: 84rpx;
  height: 84rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
}
.custom-tabbar-icon{
  width: 100%;
  height: 100%;
}
</style>

组件属性

config配置项说明

{
  "color": "#8a8a8a", // 文字默认颜色
  "selectedColor": "#1f1f1f", // 文字选中颜色
  "borderStyle": "white", // 边框颜色
  "backgroundColor": "#ffffff", // 背景颜色
  "tabbarHeight": 122, // tabbar内容高度
  "holderHeight": 142, // tabbar占位高度，正常是和tabbarHeight高度是一样的，用于异形突出tabbar，控制tabbar占位高度，防止挡住页面内容
  "iconStyle": {"width": '60rpx', "height": "60rpx"}, // 图标样式自定义
  "activeIconStyle": {"width": "60rpx", "height": "60rpx"}, // 选中状态图片样式自定义
  "textStyle": {"fontSize": "24rpx"}, // 文字样式自定义
  "activeTextStyle": {"fontSize": "24rpx"}, // 选中状态下的文字样式自定义
  "tagStyle": {"color": "#666"}
  "list": [ // tabbar项列表
    {
      "pagePath": "pages/home/home", // 页面路径
      "iconPath": "/static/hbxwtabbar/home.png", // 默认图标
      "selectedIconPath": "/static/hbxwtabbar/home_selected.png", // 选中图标
      "text": "首页", // 文字
      "key": "tabbar0", // 唯一标识
      "tag": "99" // 角标文本,true显示红点,false不显示,如果为数字或者字符串则显示tag显示内容
    }
  ]
}

使用注意事项：

自定义tabbar使用的跳转方式是uni.switchTab,所以自定义tabbar一样需要先配置好原生tabbar的配置，在指定tabbar的页面onShow生命周期中调用uni.hideTabBar隐藏原生tabbar，这样做的好处的是可以无缝使用原生API

onShow(() => {
    uni.hideTabBar();
})