微信小程序 自定义tabBar

效果：

第一种方法：（使用微信小程序官网的示例代码修改）

1. 在代码根目录下添加入口文件:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

具体步骤：

在代码根目录下新建文件夹custom-tab-bar，然后在文件夹上右击选择”新建Component"，取名index后回车，就会新建这4个文件。

2. app.json中添加tabBar的设置：

在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/shop/shop",
    "pages/begin/begin",
    "pages/member/member",
    "pages/mine/mine"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "custom": true,
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    },
    {
      "pagePath": "pages/shop/shop",
      "text": "门店"
    },
    {
      "pagePath": "pages/begin/begin",
      "text": "开台"
    },
    {
      "pagePath": "pages/member/member",
      "text": "人员"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "个人中心"
    }
  ]
  }
}

3. custom-tab-bar/index.wxml

<!--custom-tab-bar/index.wxml-->
<view class="nav-tabs">
  <view class="{{activeIdx == idx?'active':'default'}} tab-list" wx:for="{{tabArray}}" wx:key="prototype" wx:for-index="idx" 
  wx:for-item="itemName" data-current="{{idx}}" bindtap="swichNav">
  <view wx:if="{{idx!=2}}">
    <image src="{{activeIdx == idx? itemName.selectIcon: itemName.icon}}" style="width: 20px;height: 20px; "></image>
    <view>{{itemName.name}}</view>
  </view>
  <view wx:else="{{idx == 2}}" class="beginDo">
    <view>{{itemName.name}}</view>
  </view>
  </view>
</view>

4. custom-tab-bar/index.js

// custom-tab-bar/index.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    activeIdx:0,
    tabArray: [
      {"name":"首页","icon":"./../images/home.png","selectIcon":"./../images/home_active.png","path":"/pages/index/index"},
      {"name":"门店","icon":"./../images/home.png","selectIcon":"./../images/home_active.png","path":"/pages/shop/shop"},
      {"name":"开台","icon":"./../images/home.png","selectIcon":"./../images/home_active.png","path":"/pages/begin/begin"},
      {"name":"人员","icon":"./../images/home.png","selectIcon":"./../images/home_active.png","path":"/pages/member/member"},
      {"name":"个人中心","icon":"./../images/home.png","selectIcon":"./../images/home_active.png","path":"/pages/mine/mine"}
    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    swichNav(e) {
      console.log('swichNav',e);
      console.log('swichNav this.data.activeIdx=',this.data.activeIdx);
      let count = e.currentTarget.dataset.current;
      if (count === this.data.activeIdx) {
        return false;
      } else {
        wx.switchTab({
          url: this.data.tabArray[count].path,
        })
      }
    },
  }
})

5. custom-tab-bar/index/wxss

/* custom-tab-bar/index.wxss */
.nav-tabs {
  background-color: darkcyan;
  width: 100%;
  height: 45px;
  display: flex;
  position: fixed;
  bottom: 0;
  align-items: center;
}
.tab-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 10px; */
}
.tab-content {
  flex: 1;
}

.default {
  flex: 1;
  color: #000;
  font-weight: bold;
  font-size: 28rpx;
}

.active {
  color: #fc5558;
  flex: 1;
  font-weight: bold;
  font-size: 28rpx;
}
.beginDo {
  border:black 1px solid;
  background-color: burlywood;
  border-radius: 100%;
  height: 60px;
  width: 60px;
  margin-bottom: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

6. custom-tab-bar/index.json

{
  "component": true
}

7.组件的使用

在页面的onShow方法中设置选中项

如需实现 tab 选中态，要在当前页面下，通过 getTabBar 接口获取组件实例，并调用 setData 更新选中态。

onShow: function () {
    if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          activeIdx: 1
        })
      }
  },

官方文档自定义tabBar的使用流程中

红字部分并没有用到。

 第二种方法：

1. app.json：

这次用到了usingComponents

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/shop/shop",
    "pages/member/member",
    "pages/begin/begin",
    "pages/mine/mine",
    "pages/tabView/tabView"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "custom": true,
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    },
    {
      "pagePath": "pages/shop/shop",
      "text": "门店"
    },
    {
      "pagePath": "pages/begin/begin",
      "text": "开台"
    },
    {
      "pagePath": "pages/member/member",
      "text": "人员"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "个人中心"
    }
  ]
  },
  "usingComponents": {
    "tabView":"./pages/tabView/tabView"
  }
}

2. 在pages目录下新建tabView组件

 3. tabView中的3个文件（tabView.wxss，tabView.json, tabView.wxml）代码同custom-tab-bar的代码一样

4. tabView.js

// pages/tabView/tabView.js
Component({
  properties: {
    activeIdx: {
      type: Number,
      value: 0
    }
  },

  /**
   * 页面的初始数据
   */
  data: {
    tabArray: [
      {"name":"首页","icon":"./../../images/home.png","selectIcon":"./../../images/home_active.png","path":"/pages/index/index"},
      {"name":"门店","icon":"./../../images/home.png","selectIcon":"./../../images/home_active.png","path":"/pages/shop/shop"},
      {"name":"开台","icon":"./../../images/home.png","selectIcon":"./../../images/home_active.png","path":"/pages/begin/begin"},
      {"name":"人员","icon":"./../../images/home.png","selectIcon":"./../../images/home_active.png","path":"/pages/member/member"},
      {"name":"个人中心","icon":"./../../images/home.png","selectIcon":"./../../images/home_active.png","path":"/pages/mine/mine"}
    ]
  },
  methods: {
    swichNav(e) {
      let that = this;
      console.log('swichNav',e);
      console.log('swichNav this.data.activeIdx=',this.data.activeIdx);
      let count = e.currentTarget.dataset.current;
      if (count === this.data.activeIdx) {
        return false;
      } else {
        wx.switchTab({
          url: this.data.tabArray[count].path,
        })
      }
      console.log('swichNav ========',this.data.activeIdx);
    },
  }
})

5. tabView的使用

在用到tabView的页面中添加代码

<tabView activeIdx="{{0}}"></tabView>

该页面是tabBar的第几个页面，activeIdx的值就设置为几，从0开始。