更新记录

1.0.0（2025-08-19） 下载此版本

1.0.0 常用功能

平台兼容性

uni-app(4.07)

custom-headnav 组件说明

项目简介

• 基于uni-app封装的自定义tabbar组件
• 主要功能包括：自定义tabbar栏样式、tabbar数量、tabbar激活和未激活图片、tabbar标题、tabbar中间操作区图片和操作区事件等。
• 兼容微信和支付宝小程序
• 适配市场所有主流机型

注意事项

• 使用此tabbar组件时，tabbar的页面切换数量（tabbarArr）必须为偶数，且必须在使用此组件的页面均定义。 示例：

  <general-tabbar :selectedTabBar="0" :isShowExtraOpera="true" :tabbarArr="tabbarArr"></general-tabbar>

  data() {
  return {
      tabbarArr: [
          {
              title: '首页',
              activateImg: '/static/images/tabbar_home_blue.png',
              inactiveImg: '/static/images/tabbar_home_gray.png',
              targetPage: '/pages/home/index'
          }, {
              title: '我的',
              activateImg: '/static/images/tabbar_my_blue.png',
              inactiveImg: '/static/images/tabbar_my_gray.png',
              targetPage: '/pages/personal/index'
          }
      ]
  }
  },

• 使用此tabbar组件时，tabbarArr的格式要严格遵循示例（对象数组，每个对象内包含title、activateImg、inactiveImg和targetPage）。 示例：

  //tabbar内容（格式如下，需严格遵循）
  tabbarArr: {
      type: Array,
      default () {
          return [{
              title: '首页',
              activateImg: '/static/images/tabbar_home_blue.png',
              inactiveImg: '/static/images/tabbar_home_gray.png',
              targetPage: '/pages/home/index'
          }, {
              title: '我的',
              activateImg: '/static/images/tabbar_my_blue.png',
              inactiveImg: '/static/images/tabbar_my_gray.png',
              targetPage: '/pages/personal/index'
          }]
      }
  },

• 使用此tabbar组件时，每个使用此组件的页面必须按tabbarArr内的下标定义当前页面的selectedTabBar（从0开始）。 示例：

   <!-- 首页 -->
   <general-tabbar :selectedTabBar="0" :isShowExtraOpera="true" :tabbarArr="tabbarArr"></general-tabbar>
  
   <!-- 我的 -->
   <general-tabbar :selectedTabBar="1" :isShowExtraOpera="true" :tabbarArr="tabbarArr"></general-tabbar>

  data() {
      return {
          tabbarArr: [
              {
                  title: '首页',
                  activateImg: '/static/images/tabbar_home_blue.png',
                  inactiveImg: '/static/images/tabbar_home_gray.png',
                  targetPage: '/pages/home/index'
              }, {
                  title: '我的',
                  activateImg: '/static/images/tabbar_my_blue.png',
                  inactiveImg: '/static/images/tabbar_my_gray.png',
                  targetPage: '/pages/personal/index'
              }
          ]
      }
  },

• 使用自定义tabbar时，pages.json的tabBar.list需配置和tabbarArr内容同步的对象数据。 示例：

  "tabBar": {
      "custom": true,
      "color": "#000000",
      "selectedColor": "#3CC0FF",
      "backgroundColor": "#ffffff",
      "list": [{
              "iconPath": "/static/images/tabbar_home_gray.png",
              "selectedIconPath": "/static/images/tabbar_home_blue.png",
              "pagePath": "pages/home/index",
              "text": "首页"
          },
          {
              "iconPath": "/static/images/tabbar_my_gray.png",
              "selectedIconPath": "/static/images/tabbar_my_blue.png",
              "pagePath": "pages/personal/index",
              "text": "我的"
          }
      ]
  }

使用方式

1. 修改pages.json文件（增加tabBar属性） 示例：

   "tabBar": {
       "custom": true,
       "color": "#000000",
       "selectedColor": "#3CC0FF",
       "backgroundColor": "#ffffff",
       "list": [{
               "iconPath": "/static/images/tabbar_home_gray.png",
               "selectedIconPath": "/static/images/tabbar_home_blue.png",
               "pagePath": "pages/home/index",
               "text": "首页"
           },
           {
               "iconPath": "/static/images/tabbar_my_gray.png",
               "selectedIconPath": "/static/images/tabbar_my_blue.png",
               "pagePath": "pages/personal/index",
               "text": "我的"
           }
       ]
   }

2. 页面引入并定义tabbarArr后使用 示例：

   <general-tabbar :selectedTabBar="0" :isShowExtraOpera="true" :tabbarArr="tabbarArr"></general-tabbar>

   import generalTabbar from '@/components/general-tabbar.vue';
   export default {
       data() {
           return {
               tabbarArr: [
                   {
                       title: '首页',
                       activateImg: '/static/images/tabbar_home_blue.png',
                       inactiveImg: '/static/images/tabbar_home_gray.png',
                       targetPage: '/pages/home/index'
                   }, {
                       title: '我的',
                       activateImg: '/static/images/tabbar_my_blue.png',
                       inactiveImg: '/static/images/tabbar_my_gray.png',
                       targetPage: '/pages/personal/index'
                   }
               ]
           }
       },
       components: {
           generalTabbar
       },
   }

参数说明

Attributes

方法