返回

怎么让微信小程序的tabBar中间突出？一种特殊的设计方式

前端

自定义微信小程序 tabBar：打造独一无二的导航体验

引言

微信小程序 tabBar，作为底部导航栏，在便捷访问小程序不同页面方面扮演着至关重要的角色。默认情况下，tabBar 呈现为水平分布的图标。然而，通过自定义 tabBar，你可以突破常规，创造一个更加吸引眼球的设计，而中间突出样式无疑是其中最引人注目的选择之一。

准备工作

在踏上自定义之旅之前，确保满足以下先决条件：

  • 微信开发者工具已安装并运行
  • 现有的微信小程序项目
  • 微信小程序开发基础知识

添加自定义 tabBar

要创建自定义 tabBar，需要在小程序的 app.json 文件中进行如下修改：

  1. 为 tabBar 属性指定值 "custom"。
{
  "tabBar": {
    "custom": true
  }
}
  1. 在小程序的 tabBar.json 文件中定义自定义 tabBar 的结构。
{
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/home.png",
      "selectedIconPath": "images/home_active.png"
    },
    {
      "pagePath": "pages/about/about",
      "text": "关于",
      "iconPath": "images/about.png",
      "selectedIconPath": "images/about_active.png"
    }
  ]
}

实现中间突出设计

为了实现中间突出效果，我们需要在小程序的样式表 app.wxss 中添加 CSS 代码：

.custom-tabbar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  background-color: #ffffff;
  border-top: 1px solid #000000;
}

.custom-tabbar .tabbar-item {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: #000000;
}

.custom-tabbar .tabbar-item.active {
  color: #FF0000;
}

.custom-tabbar .tabbar-item-icon {
  width: 24px;
  height: 24px;
  margin: 0 auto 5px;
}

.custom-tabbar .tabbar-item-text {
  margin-top: 5px;
}

.custom-tabbar-bubble {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: #FF0000;
  border-radius: 50%;
}

运行小程序

所有配置完成后，即可在微信开发者工具中运行小程序，体验焕然一新的自定义 tabBar。

效果预览

运行小程序后，你会看到一个中间突出样式的自定义 tabBar。

总结

通过遵循本指南，你已经成功地为微信小程序创建了中间突出的自定义 tabBar。通过灵活运用自定义功能，你可以打造独一无二的导航体验，提升小程序的吸引力和用户友好度。

常见问题解答

  1. 如何更改 tabBar 的背景颜色？

    • 修改 custom-tabbar 类的 background-color 属性。

  2. 如何更改 tabBar 项的字体大小？

    • 修改 custom-tabbar .tabbar-item 类的 font-size 属性。

  3. 如何禁用某个 tabBar 项？

    • 为禁用的 tabBar 项添加 disabled 类。

  4. 如何添加角标到 tabBar 项？

    • 添加一个子元素，并应用 custom-tabbar-badge 样式类。

  5. 如何添加自定义图标到 tabBar 项？

    • 覆盖 custom-tabbar .tabbar-item-icon 类的默认图标样式，并添加自定义图标的路径。