微信小程式自定義tabBar

小程式官方提供的方法點選切換會有閃爍，用下面方法不會有這問題,照著貼上

1. app.js

  //tabBar全域性點選事件
  editTabbar: function () {
    var tabbar = this.globalData.tabBar;
    var currentPages = getCurrentPages();
    var that = currentPages[currentPages.length - 1];
    var pagePath = that.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);
    }
    that.setData({
      tabbar: tabbar
    });
  },
  globalData: {
    userInfo: null,
    tabBar: {
      "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": "我的"
        }
      ]
    }

  }

2. 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"
      }
    ]
  },

3.根目錄下新建資料夾tabbar（與pages同級），裡面包括以下檔案，image裡放底部圖片

4. tabbar.js

const app = getApp();
Component({
  properties: {
    tabbar: {
      type: Object,
    }
  },
  methods: {
    goPage: function (event) {
      var url = event.currentTarget.dataset.id;
      wx.switchTab({
        url: url,
      })
    }
  },
})

5.tabbar.json

{
  "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;
}

8.classify.js 和另外兩個頁面js

const app = getApp()
Page({
  data: {
    tabbar: {}
  },
  onLoad: function (options) {
    app.editTabbar();
  }
  
})

9.classify.json 和另外兩個頁面json

{
  "usingComponents": {
    "tabbar": "../../tabbar/tabbar"
  },
  "navigationBarTitleText": "分類"
}

10.classify.wxml 和另外兩個頁面wxml

<tabbar tabbar="{{tabbar}}"></tabbar>