更新记录

1.0.0(2024-11-22) 下载此版本

组件新发布


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

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

属性名 类型 默认值 必填 说明
config Object null tabbar配置,和原生tabbar配置基本一致,只是多了个key,数据类型参考示例
activeKey String '' 当前高亮项,用于标示当前在哪一个页面
customKey String '' 用于实现个性化tabbar,指定key来指定哪一项应用自定义UI

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问