页面创建

在开发小程序时，底部导航栏是一个常见的功能模块。以支付宝官方小程序IDE为例，首先需要创建四个页面，因为一般的小程序底部导航栏会配置四个tab。需要注意的是，官方文档明确说明tab最多可以设置五个，超出这个数量则无法实现。

在app.json中配置底部导航栏

底部导航栏的所有配置信息都需要在app.json文件中完成。通过"tabBar"属性进行配置，主要包含以下参数：

list：定义每个tab的页面路径、图标、文字等

color：未选中状态下的文字颜色

backgroundColor：导航栏背景色

borderStyle：边框样式（可选white/black）

常见配置错误包括：

{
  "pages": [
    "pages/index/index",
    "pages/mine/mine",
    "pages/sort/sort",
    "pages/basket/basket"
  ],
  "window": {
    "defaultTitle": "购物商城"
  },
  //底部导航栏的信息
  "tabBar": {
    "textColor": "#dddddd",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "首页"
      },
      {
        "pagePath": "pages/sort/sort",
        "name": "分类"
      },
      {
        "pagePath": "pages/basket/basket",
        "name": "购物车"
      },
      {
        "pagePath": "pages/mine/mine",
        "name": "我的"
      }
    ]
  }
}

1. 路径填写错误

2. 图标尺寸不符合要求（建议32px×32px）

3. 颜色值格式不正确（必须使用十六进制）

导航栏美化

基础功能实现后，可以通过以下方式提升导航栏美观度：

1. 图标优化：

每个tab需要准备两个图标：选中和非选中状态

图标建议使用透明背景的PNG格式

图标大小建议32px×32px

2. 颜色搭配：

选中和非选中状态的颜色要有明显区分

 "tabBar": {
    "textColor": "#0e932e",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "icon": "images/index.png",
        "activeIcon": "images/index_t.png",
        "name": "首页"
      },
      {
        "pagePath": "pages/sort/sort",
        "icon": "images/sort.png",
        "activeIcon": "images/sort_t.png",
        "name": "分类"
      },
      {
        "pagePath": "pages/basket/basket",
        "icon": "images/basket.png",
        "activeIcon": "images/basket_t.png",
        "name": "购物车"
      },
      {
        "pagePath": "pages/mine/mine",
        "icon": "images/mine.png",
        "activeIcon": "images/mine_t.png",
        "name": "我的"
      }
    ]
  }

背景色与文字颜色要有足够对比度

3. 文字精简：

每个tab的文字建议2-4个字

文字太长会影响显示效果

进阶功能实现

1. 红点提示：

使用my.setTabBarBadge()方法添加红点

//index.js
Page({
  onLoad(query) {
    my.showTabBarRedDot({
      index: 3,//左边开始，从0计数
      success: function(res) {
        console.log(res);    //{ "success": true}
      },
      fail: function(err) {
        console.log(err);
      }
    })
    console.info(`Page onLoad with query: ${JSON.stringify(query)}`);
  },
})

使用my.removeTabBarBadge()方法移除红点

红点位置可以微调

2. 文本提示：

使用my.setTabBarItem()方法添加数字提示

//mine.js
Page({
  onLoad() {
    my.hideTabBarRedDot({
      index: 3,//左边开始，从0计数
      success: function(res) {
        console.log(res);   //{ "success": true}
      },
      fail: function(err) {
        console.log(err);
      }
    });
  },
});

超过3个字符会自动显示为"..."

提示信息不及时更新

提示位置偏移

多次点击导致提示重复

自定义导航栏实现

加入购物车

当默认导航栏无法满足需求时，可以使用自定义方案：

//index.js
Page({
  addShop(){
    my.setTabBarBadge({
      index: 2,//左边开始，从0计数
      text: '8',//全部显示只支持3个字符
      success(res) {
        console.log(res);
      },
      fail(res) {
        console.log('setTabBarBadge fail: ', res);
      }
    })
  }
});

1. 创建目录结构：

新建custom-tab-bar目录

包含.axml、.js、.acss文件

2. 修改app.json配置：

设置"custom": true启用自定义

保持文件路径一致

3. 编写自定义代码：

//basket.js
Page({
  onLoad() {
    my.removeTabBarBadge({
      index: 2,//左边开始，从0计数
      success: function(res) {
        console.log(res);   // { "success": true}
      },
      fail: function(err) {
        console.log(err);
      }
    });
  },
});

.axml：编写导航栏布局

.js：处理点击事件和状态管理

.acss：定义样式效果

注意事项：

自定义导航栏需要处理更多细节

要考虑不同设备的适配问题

测试各种边界情况

通过以上步骤，可以打造出既美观又实用的底部导航栏。建议开发过程中多进行真机测试，确保各种状态下都能正常显示。