实现凸起的底部 Tabbar 的方法

大家好，今天我来分享一下如何在 Uniapp 中设置凸起的底部 Tabbar，并且让它的内容更加丰富。Uniapp 是一个跨平台的开发框架，它可以帮助开发者同时开发出适用于多个平台的应用程序。

设置凸起的底部 Tabbar

要实现凸起的底部 Tabbar，我们可以使用 Uniapp 内置的 Tabbar 组件，并在其中设置一个凸起的按钮。首先，我们需要在 pages.json 文件中配置底部 Tabbar：

{
  "pages": [
    {
      "path": "pages/home/home",
      "name": "home",
      "text": "首页"
    },
    {
      "path": "pages/category/category",
      "name": "category",
      "text": "分类"
    },
    {
      "path": "pages/cart/cart",
      "name": "cart",
      "text": "购物车"
    },
    {
      "path": "pages/mine/mine",
      "name": "mine",
      "text": "我的"
    }
  ],
  "tabBar": {
    "color": "#999",
    "selectedColor": "#333",
    "backgroundColor": "#f7f7f7",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/home/home",
        "iconPath": "static/images/home.png",
        "selectedIconPath": "static/images/home_active.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/category/category",
        "iconPath": "static/images/category.png",
        "selectedIconPath": "static/images/category_active.png",
        "text": "分类"
      },
      {
        "pagePath": "pages/cart/cart",
        "iconPath": "static/images/cart.png",
        "selectedIconPath": "static/images/cart_active.png",
        "text": "购物车"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "static/images/mine.png",
        "selectedIconPath": "static/images/mine_active.png",
        "text": "我的"
      }
    ]
  }
}

在以上的配置中，我们设置了底部 Tabbar 按钮的样式、文字和图标。然后，我们需要在相应的页面中创建对应的 Vue 组件，例如 home.vue、category.vue、cart.vue 和 mine.vue。

内容丰富化

为了让底部 Tabbar 的内容更加丰富，我们可以在每个页面组件中加入自己的内容。例如，在首页 home.vue 组件中，可以添加轮播图、商品列表、推荐分类等等。在分类页面 category.vue 组件中，可以展示各种分类的商品列表。在购物车页面 cart.vue 组件中，可以显示已选中的商品和结算按钮。在我的页面 mine.vue 组件中，可以展示用户的个人信息和订单列表等。通过在不同的页面组件中添加不同的内容，可以使底部 Tabbar 的每个按钮都具有独特的功能和展示效果。

结语

通过以上的配置和添加页面内容的方法，我们可以实现一个凸起的底部 Tabbar，并使其内容更加丰富。Uniapp 是一个非常方便快捷的开发框架，希望本篇博客对大家有所帮助。如果有任何疑问或意见，欢迎留言讨论。谢谢阅读！

本文来自极简博客，作者：前端开发者说，转载请注明原文链接：实现凸起的底部 Tabbar 的方法