微信小程序如何自定義底部導航

先看一下自定義底部導航（圖1）和未自定義的導航（圖2）效果差距

圖1

圖2
如何實現自定義底部導航

1. 需要在app.json 的配置項"tabBar"中添加 "custom":true,添加了這個屬性之后，下面的list配置項將失效
   所以如果自定義底部導航欄的話是不需要在app.json中配置list的。
2. 創建一個與pages同級的文件夾，名稱為custom-tab-bar文件夾名字是規定好的只能叫做這個。
3. 創建好這個文件夾之后就是編寫底部導航的內容
   

custom-tab-bar/index.js

點擊查看代碼

Component({
    properties: {

    },
    data: {
        list: [{
            "pagePath": "pages/index/index",
            "text": "首頁",
            "iconPath": "images/index.png",
            "selectedIconPath": "images/index-select.png"
          },
          {
            "pagePath": "pages/page1/index",
            "text": "導航1",
            "iconPath": "images/alumus.png",
            "selectedIconPath": "images/alumus-select.png"
          },
          {
            "pagePath": "pages/page2/index",
            "text": "導航2",
            "iconPath": "images/alumus.png",
            "selectedIconPath": "images/alumus-select.png"
          },
          {
            "pagePath": "pages/page3/index",
            "text": "導航3",
            "iconPath": "images/alumus.png",
            "selectedIconPath": "images/alumus-select.png"
          },
          {
            "pagePath": "pages/page4/index",
            "text": "導航4",
            "iconPath": "images/alumus.png",
            "selectedIconPath": "images/alumus-select.png"
          }],
        currentindex: 0
    },
    methods: {
        switchTab(e) {
            let url = '/' + e.currentTarget.dataset.path
            this.setData({
                currentindex: e.currentTarget.dataset.index
            })
            
            wx.switchTab({
                url: url,
            })
        }
    }
})

custom-tab-bar/index.json

點擊查看代碼

{
    "usingComponents": {},
    "navigationBarTitleText": "",
    "navigationBarBackgroundColor": "#4576c9",
    "navigationBarTextStyle": "white"
  }

custom-tab-bar/index.wxml

點擊查看代碼

<view class="tabar">
    <view wx:for="{{list}}" wx:key="index"  class="item"  data-index="{{index}}" data-path="{{item.pagePath}}" bindtap="switchTab">
      <image  class="image" src="{{currentindex==index?('../'+item.selectedIconPath):('../'+item.iconPath)}}"></image>
        <view class="{{currentindex==index?'color':''}}">{{item.text}}</view>
    </view>
</view>

custom-tab-bar/index.wxss

點擊查看代碼

.tabar {
    height: 140rpx;
    width: 100vw;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    border-top: 1px solid #f3f3f3;
}
.tabar .item {
    width: 20vw ;
    height: 140rpx;
    color: #bcbcbc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    background-color: white;
    
}
.tabar .item  .image {
    width: 60rpx;
    height: 60rpx;
}
.tabar .item .color {
    color: #4576c9;
}

4. 上一步將底部導航組件准備好后，接下來編輯代碼實現點擊切換頁面的效果，在app.js中添加editTabBar函數

app.js

點擊查看代碼

App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error('請使用 2.2.3 或以上的基礎庫以使用雲能力');
    } else {
      wx.cloud.init({
        // env 參數說明：
        //   env 參數決定接下來小程序發起的雲開發調用（wx.cloud.xxx）會默認請求到哪個雲環境的資源
        //   此處請填入環境 ID, 環境 ID 可打開雲控制台查看
        //   如不填則使用默認環境（第一個創建的環境）
        // env: 'my-env-id',
        traceUser: true,
      });
    }

    this.globalData = {};
  },
  editTabBar: function () {
    //使用getCurrentPages可以獲取當前加載中所有的頁面對象的一個數組，數組最后一個就是當前頁面。

    var curPageArr = getCurrentPages(); //獲取加載的頁面
    var curPage = curPageArr[curPageArr.length - 1]; //獲取當前頁面的對象
    var pagePath = curPage.route; //當前頁面url
    if (pagePath.indexOf('/') != 0) {
      pagePath = '/' + pagePath;
    }

    var tabBar = this.globalData.tabBar;
    for (var i = 0; i < tabBar.list.length; i++) {
      tabBar.list[i].active = false;
      if (tabBar.list[i].pagePath == pagePath) {
        tabBar.list[i].active = true; //根據頁面地址設置當前頁面狀態 
      }
    }
    curPage.setData({
      tabBar: tabBar
    });
  }
});

5. 完成到上一步之后已經可以實現頁面的切換效果了，但是頁面切換了，但是底部導航的選中狀態並沒有實現對應的選中效果 接下來需要在每個展示頁面的onShow鈎子函數中編寫實現底部導航和頁面對應的選中效果

首頁是第一個頁面所以currentindex的值設為0，后面依次為，page1頁面就是1，page2頁面就是2.....

到這里就實現了一個簡單的底部導航。可以根據自己項目的業務需求自定義更為復雜的底部導航。位置也可以不在底部，具體修改custom-tab-bar下面的樣式文件即可。

如果控制台有下圖警告
只需要在project.config.json文件中找到"checkSiteMap"改為false即可。