底部导航凸起样式，打造美观实用的APP界面

前端

2023-01-30 18:39:32

UniApp CSS 赋能凸起式底部导航：提升移动应用设计美感

什么是凸起式底部导航？

底部导航栏是现代移动应用不可或缺的元素，它不仅提供便捷的导航功能，更能提升用户体验和界面美观。凸起式底部导航打破了传统底部导航栏的局限，将特定按钮或功能以更醒目的方式呈现。这种设计策略旨在突出重点功能，为用户提供更直观、更具互动性的体验。

UniApp CSS 实现凸起式底部导航

UniApp 是一个跨平台移动应用开发框架，凭借强大的 CSS 样式支持，开发者可以轻松实现凸起式底部导航。以下步骤将指导你完成这一操作：

创建自定义 CSS 文件

在 UniApp 项目中新建一个 CSS 文件，例如 custom.css。

添加 CSS 代码

在 custom.css 文件中添加以下代码：

.uni-tabbar-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.uni-tabbar-item-icon--active {
  background-color: #007aff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

导入自定义 CSS

在 UniApp 项目的 app.vue 文件中，在 <style> 标签内添加以下代码：

@import "./custom.css";

配置底部导航

在 UniApp 项目的 pages.json 文件中，将以下代码添加到 tabBar 对象中：

{
  "selectedColor": "#007aff",
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "static/icons/home.png",
      "selectedIconPath": "static/icons/home-active.png"
    },
    {
      "pagePath": "pages/cart/cart",
      "text": "购物车",
      "iconPath": "static/icons/cart.png",
      "selectedIconPath": "static/icons/cart-active.png"
    },
    {
      "pagePath": "pages/profile/profile",
      "text": "我的",
      "iconPath": "static/icons/profile.png",
      "selectedIconPath": "static/icons/profile-active.png"
    }
  ]
}