uniapp 自定义tabbar

Uniapp中可以通过自定义底部导航栏来实现自定义tabbar的效果。具体步骤如下：

1. 在pages目录下创建几个页面，分别代表不同的tab页；

2. 在App.vue中使用uni-tabbar组件来创建底部导航栏，示例代码如下：

<template>
  <view>
    <uni-tab-bar :list="tabList" :current="current" @change="onChange"></uni-tab-bar>
    <router-view></router-view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        current: 0, // 默认选中第一个tab
        tabList: [
          {
            pagePath: "/pages/tab1/tab1",
            text: "tab1",
            iconPath: "/static/tab1.png",
            selectedIconPath: "/static/tab1_selected.png"
          },
          {
            pagePath: "/pages/tab2/tab2",
            text: "tab2",
            iconPath: "/static/tab2.png",
            selectedIconPath: "/static/tab2_selected.png"
          }
        ]
      };
    },
    methods: {
      onChange(event) {
        this.current = event.detail.index;
        uni.switchTab({
          url: this.tabList[event.detail.index].pagePath
        });
      }
    }
  };
</script>

其中uni-tab-bar组件的list属性表示tab页列表，current属性表示当前选中的tab索引，change事件表示tab切换时的回调函数。

3. 在每个tab页的页面配置文件（如tab1.vue）中设置底部导航栏的样式和文本信息，示例代码如下：

{
  "navigationBarTitleText": "tab1",
  "tabBar": {
    "selectedColor": "#007AFF",
    "backgroundColor": "#FFFFFF",
    "color": "#666666",
    "list": [
      {
        "pagePath": "pages/tab1/tab1",
        "text": "tab1",
        "iconPath": "/static/tab1.png",
        "selectedIconPath": "/static/tab1_selected.png"
      }
    ]
  }
}

其中tabBar属性的list表示当前tab页在底部导航栏中的样式和文本信息，具体属性可参考uni-tab-bar组件的文档。

4. 最后，在每个tab页的页面文件中进行页面布局和业务逻辑的编写即可。

通过以上方式，我们就可以实现自定义tabbar的效果。需要注意的是，uni-tab-bar组件只能在App.vue文件中使用，而不能在其他页面中使用。