uniapp底部导航栏

Uniapp 提供了一种简单的方式来创建底部导航栏，你可以按照以下步骤进行操作：

1. 在 `pages.json` 文件中定义底部导航栏的样式和页面路径，例如：

{
  "tabBar": {
    "color": "#666",
    "selectedColor": "#007aff",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home_active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "static/tabbar/cart.png",
        "selectedIconPath": "static/tabbar/cart_active.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "static/tabbar/mine.png",
        "selectedIconPath": "static/tabbar/mine_active.png"
      }
    ]
  }
}

2. 在每个对应的页面中设置 `navigationBarTitleText` 来显示页面标题，例如：

{
  "navigationBarTitleText": "首页"
}

3. 如果需要在底部导航栏中显示未读消息数量或者其他自定义内容，可以使用 `uni-badge` 组件，例如：

<uni-tab-bar-item index="1" text="购物车" icon="uni-icons-list" selected-icon="uni-icons-list-active">
  <uni-badge class="custom-badge" :value="2" />
</uni-tab-bar-item>

其中 `custom-badge` 是自定义样式类名，可以在 `App.vue` 中进行样式定义。

以上就是使用 Uniapp 创建底部导航栏的基本步骤，希望对你有所帮助。