[移动开发]微信小程序自定义tabbar

自定义tabbar需要在app.json的tabbar字段中声明 “custom”: true

具体代码

  "tabBar": {
    "custom": true,
    "selectedColor": "#10AEFF",
    "color": "#999999",
    "backgroundColor": "#fff",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"    
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  },

注意点：

1. 为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。
2. 所以tabbar页面的json文件中需要声明 usingComponents 项

创建tabbar的文件

在代码根目录创建 custom-tab-bar文件夹，并添加入口文件
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

编写tabbar的代码

正常写一个tab栏的样式和功能。如果不知道怎么编写，可以去使用Vant Weapp UI库的Tabbar 标签栏组件。

简易代码示例：

app.json的tabbar编写

  "tabBar": {
    "custom": true,
    "selectedColor": "#10AEFF",
    "color": "#999999",
    "backgroundColor": "#fff",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"    
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  },

custom-tab-bar代码
html部分

html部分
------------------------------
<view class="tab">
    <view class="{{select ===0?'selected':''}}" bind:tap="nav" data-page="/pages/index/index">
        首页
    </view>
    <view class="{{select ===1?'selected':''}}" bind:tap="nav" data-page="/pages/mine/mine">
        我的
    </view>
</view>

css部分-------------------
.tab{
    width: 750rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #fff;
    // 下面两行代码适配部分手机底部的安全距离（底部小黑条）
    padding-bottom: calc(constant(safe-area-inset-bottom) / 2);
    padding-bottom: calc(env(safe-area-inset-bottom) / 2);

}
.selected{
    color: red;
}

js部分
  /**
   * 页面的初始数据
   */
  data: {
    select: 0
  },
  nav(e) {
    let { page } = e.currentTarget.dataset
    wx.switchTab({
      url: page
    })
  },

在/pages/index/index.js文件中的代码，可以直接写在onShow生命周期里面，或者自己写一个函数，然后再onShow里面调用

/pages/index/index.js页面代码
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getTabBar().setData({
      select: 0
    })
  },

/pages/mine/mine.js代码

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getTabBar().setData({
      select: 1
    })
  },

。官方文档地址