tabBar 自定義，小程序自定義底部導航欄

創建一個自定義組件 my_tab，組件代碼在後面，先看調用自定義組件的代碼，比如我需要在index 頁面調用，就在index.json中引用組件，index.json 代碼（引用的路徑爲你創建的自定義組件路徑）

{
  "navigationStyle": "custom",
  "usingComponents": {
    "my_tab": "../Component/my_tab"
  }
}

我的組件目錄如下：

然後在index.wxml 中使用組件就可以

<my_tab></my_tab>

效果圖：

 

下面是組件代碼：

組件JS代碼

// my-picker.js
Component({
  /**
   * 組件的屬性列表
   */
  lifetimes: {
    attached: function() {
      // 在組件實例進入頁面節點樹時執行
      this.setData({
        idx:wx.getStorageSync('myTab')||1
      })
    },
    detached: function() {
      // 在組件實例被從頁面節點樹移除時執行
    },
  },
  data: {
    idx:wx.getStorageSync('myTab')||1
  },
  /**
   * 組件的方法列表
   */
  methods: {
    navPage: function (e) {
      let id = e.currentTarget.id;
      if(id==wx.getStorageSync('myTab'))return

      wx.setStorageSync('myTab', id)
      if(id==1){
        wx.reLaunch({
          url: '/pages/chatList/chatList',
        })
      }else if(id==2){
        wx.reLaunch({
          url: '/pages/mailList/mailList',
        })
      }else if(id==3){
        wx.reLaunch({
          url: '/pages/find/find',
        })
      }else if(id==4){
        wx.reLaunch({
          url: '/pages/user/user',
        })
      }
    },
  }
})

my_tab.json

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

my_tab.wxml

<!--pages/my_tab.wxml-->
<view class="my_tab">
	<view catchtap="navPage" style="color:{{idx==1?'#13D36A':''}}" id="1">聊天</view>
	<view catchtap="navPage" style="color:{{idx==2?'#13D36A':''}}" id="2">通訊錄</view>
	<view catchtap="navPage" style="color:{{idx==3?'#13D36A':''}}" id="3">發現</view>
	<view catchtap="navPage" style="color:{{idx==4?'#13D36A':''}}" id="4">我</view>
</view>

my_tab.wxss

/* pages/my_tab.wxss */
.my_tab {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 110rpx;
  line-height: 110rpx;
  display: flex;
  flex-direction: row;
  background-color: #F7F7F7;
  border-top: 1px solid #d0d0d0;
}

.my_tab view {
  flex: 1;
  text-align: center;
}