小程序自定义tabbar

在微信小程序中自定义 tabbar 需要使用小程序的 API，并且需要自己实现 tabbar 的显示逻辑和页面跳转。以下是一个简单的自定义 tabbar 实现示例：

首先，在小程序的 app.json 文件中配置：

{
  "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  }
}

然后，在 app.json 同级目录下创建 custom-tab-bar 组件，例如 custom-tab-bar.json、custom-tab-bar.wxml、custom-tab-bar.wxss 和 custom-tab-bar.js 文件。

custom-tab-bar.wxml:

<view class="tabbar">
  <block wx:for="{{list}}" wx:key="pagePath">
    <view class="tabbar-item {{item.pagePath === currentPage ? 'active' : ''}}" bindtap="switchTab" data-path="{{item.pagePath}}">
      {{item.text}}
    </view>
  </block>
</view>

custom-tab-bar.wxss:

.tabbar {
  display: flex;
  font-size: 14px;
}
 
.tabbar-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 0;
  border-top: 1px solid #ccc;
  box-sizing: border-box;
}
 
.tabbar-item.active {
  color: #09BB07;
  border-color: #09BB07;
}

custom-tab-bar.js:

Component({
  properties: {
    list: {
      type: Array,
      value: []
    }
  },
  data: {
    currentPage: ''
  },
  methods: {
    switchTab(e) {
      const { pagePath } = e.currentTarget.dataset;
      wx.switchTab({
        url: pagePath,
        success: () => {
          this.setData({ currentPage: pagePath });
        }
      });
    }
  },
  lifetimes: {
    attached() {
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1].route;
      this.setData({ currentPage });
    }
  }
});

最后，在 app.json 中引用自定义组件：

{
  "usingComponents": {
    "custom-tab-bar": "/path/to/your/custom-tab-bar"
  }
}

在需要显示 tabbar 的页面的 .json 文件中使用：

{
  "usingComponents": {
    "custom-tab-bar": "/path/to/your/custom-tab-bar"
  }
}

在相应的 .wxml 文件中添加：

<custom-tab-bar list="{{tabbarList}}" />

在 .js 文件中设置 tabbarList 数据：

Page({
  data: {
    tabbarList: [
      {
        pagePath: '/pages/home/home',
        text: '首页'
      },
      {
        pagePath: '/pages/mine/mine',
        text: '我的'
      }
    ]
  }
});

这样就实现了一个简单的自定义 tabbar。