uniapp 微信小程序自定义底部tabbar

UniApp 是一个使用 Vue.js 开发跨平台应用的前端框架，它支持将代码一次编写，即可发布到多个平台，包括微信小程序。在 UniApp 中，自定义底部 tabbar 非常简单，只需要在 pages.json 中指定 tabBar 配置，然后在页面中使用自己的自定义 tabbar 组件即可。

以下是自定义底部 tabbar 的步骤：
1. 在 pages.json 文件中设置 tabBar 配置，如下所示：

{
  "tabBar": {
    "custom": true, // 使用自定义的tabBar
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "backgroundColor": "#ffffff",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/static/tabbar/home.png",
        "selectedIconPath": "/static/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "/static/tabbar/user.png",
        "selectedIconPath": "/static/tabbar/user-active.png"
      }
    ]
  }
}

2. 在页面中引入自己的自定义 tabbar 组件，并使用该组件替换默认的 tabBar，如下所示：

<template>
  <view>
    <router-view />
    <my-tab-bar :list="list" :active.sync="active" />
  </view>
</template>

<script>
import MyTabBar from '@/components/MyTabBar.vue'

export default {
  components: {
    MyTabBar
  },
  data () {
    return {
      active: 0,
      list: [
        {
          text: '首页',
          icon: '/static/tabbar/home.png',
          selectedIcon: '/static/tabbar/home-active.png',
          path: '/pages/index/index'
        },
        {
          text: '我的',
          icon: '/static/tabbar/user.png',
          selectedIcon: '/static/tabbar/user-active.png',
          path: '/pages/user/user'
        }
      ]
    }
  }
}
</script>

以上是自定义底部 tabbar 的简单介绍，如果您需要更详细的内容，请查看 UniApp 的官方文档。