微信小程序自定义tabBar

小程序官方提供的方法点击切换会有闪烁，用下面方法不会有这问题,照着粘贴

1. app.json

"pages":[
    "pages/classify/classify",
    "pages/scan/scan",
    "pages/my/my",
  ],
  "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/classify/classify"
      },
      {
        "pagePath": "pages/scan/scan"
      },
      {
        "pagePath": "pages/my/my"
      }
    ]
  },

2.创建tabbar组件，根目录下创建一个components文件夹(和pages同级)，右键创建一个tabbar文件夹，右键tabbar文件夹->新建Component输入tabbar会出现四个文件

3.根目录下创建image文件夹，image里放底部图片

4. tabbar.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabbar: {
      type: Object,
      value: {
        "backgroundColor": "#ffffff",
        "color": "#999999",
        "selectedColor": "#ed6c9e",
        "list": [
          {
            "pagePath": "/pages/classify/classify",
            "iconPath": "/image/classify.png",
            "selectedIconPath": "/image/classify_select.png",
            "text": "分类"
          },
          {
            "pagePath": "/pages/scan/scan",
            "iconPath": "/image/scan.jpg",
            "selectedIconPath": "/image/scan_select.jpg",
            "isSpecial": true,
            "text": ""
          },
          {
            "pagePath": "/pages/my/my",
            "iconPath": "/image/my.png",
            "selectedIconPath": "/image/my_select.png",
            "text": "我的"
          }
        ]
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    goPage: function (event) {
      var url = event.currentTarget.dataset.id;
      wx.switchTab({
        url: url,
      })
    }
  },
  lifetimes : {
    attached: function() {
      var tabbar = this.properties.tabbar;
      var currentPages = getCurrentPages();
      var currentPage = currentPages[currentPages.length - 1];
      var pagePath = currentPage.route;
      (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
      for (var i in tabbar.list) {
        tabbar.list[i].selected = false;
        (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
      }
      this.setData({
        tabbar: tabbar
       });
      var detail = {"tabbar":tabbar} 
      var option = {}
      this.triggerEvent("customevent",detail,option);
    }
  }
})

5.tabbar.json ，按照第2步创建会自动出现

{
  "component": true,
  "usingComponents": {}
}

6.tabbar.wxml

<view class="tabbar_box" style="background-color:{{tabbar.backgroundColor}}">
  <block wx:for="{{tabbar.list}}" wx:key="item.pagePath">
    <view wx:if="{{item.isSpecial == true}}" class="tabbar_nav" hover-class="none" bindtap="goPage" data-id="{{item.pagePath}}" style="color:{{tabbar.selectedColor}}">
        <image class="tabbar_icon_special" src="{{item.selected ? item.selectedIconPath : item.iconPath}}" style="box-shadow:{{item.selected ? '0 0 10rpx #ed6c9e':'none'}}"></image>
    </view>  
    <view wx:else class="tabbar_nav" hover-class="none" bindtap="goPage" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" data-id="{{item.pagePath}}">
      <image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
      <text>{{item.text}}</text>
    </view>
  </block>
</view> 

7.tabbar.wxss

.tabbar_box{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 80rpx;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}
.tabbar_nav{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 20rpx;
    height: 100%;
    position: relative;
}
.tabbar_icon{
    width: 38rpx;
    height: 34rpx;
}
.tabbar_icon_special{
  position: absolute;
  top: -24rpx;
    width: 72rpx;
    height: 70rpx;
}

9.使用组建的页面classify.json ，另外两个页面一样

{
  "usingComponents": {
    "tabbar": "/components/tabbar/tabbar"
  },
  "navigationBarTitleText": "分类"
}

10.使用组建的页面classify.wxml ，另外两个页面一样

<tabbar bindcustomevent="onCustomEventEvent"></tabbar>