更新记录

1.0.0（2024-11-22） 下载此版本

组件新发布

平台兼容性

hbxw-tabbar自定义tabbar组件

介绍

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

使用示例

推荐先直接复制示例代码到工程中看效果了解下使用方法再投入项目使用。

为了你测试的方便，组件根目录下static_test文件夹中放置的是我自测的图标，你可以拿来测试用

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

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

    <!-- 中间突起的tabbar -->
        <hbxw-tabbar 
      v-if="tabbarType === 'coustom'" 
      :config="tabbar" 
      activeKey="tabbar2" 
      customKey="tabbar2"
    >
      <template #custom="{item, index, isActive, bgColor}">
        <view class="custom-tabbar-item" :style="{'border-style': bgColor, 'background-color': bgColor}">
          <image v-if="!isActive" class="custom-tabbar-icon" :src="item.iconPath" />
          <image v-else class="custom-tabbar-icon" :src="item.selectedIconPath" />
        </view>
      </template>
    </hbxw-tabbar>
    </view>
</template>

<script>
    export default {
        data() {
            return {
        tabbarType: 'normal',
        // tabbar配置
                tabbar: {
          "color": "#8a8a8a",
          "selectedColor": "#1f1f1f",
          "borderStyle": "white",
          "backgroundColor": "#ffffff",
          "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"
            },
            {
              "pagePath" : "pages/rentAll/index",
              "iconPath" : "/static/hbxwtabbar/activity.png",
              "selectedIconPath" : "/static/hbxwtabbar/activity_selected.png",
              "text" : "活动",
              "key": "tabbar2"
            },
            {
              "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>
.conatainer{
  height: 150vh;
  background-color: green;
}
/* 自定义tabbar项 */
.custom-tabbar-item{
  width: 104rpx;
  height: 104rpx;
  border-radius: 50%;
  border: 10rpx solid white;
  background-color: white;
  box-sizing: border-box;
}
.custom-tabbar-icon{
  width: 84rpx;
  height: 84rpx;
}
</style>

使用注意事项： 自定义tabbar使用的跳转方式是uni.switchTab,所以自定义tabbar一样需要先配置好原生tabbar的配置，在指定tabbar的页面onShow生命周期中调用uni.hideTabBar隐藏原生tabbar

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

API

Props