微信小程式app.json中配置tabBar使用

1. 預設配置-配置資訊

  "tabBar": {
    "custom":false,
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁" ,
      "iconPath": "img/compont_un.png",
      "selectedIconPath": "img/compont_on.png"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日誌",
      "iconPath": "img/compont_un.png",
      "selectedIconPath": "img/compont_on.png"
    }],
    "color":"#000",//字型顏色
    "selectedColor":"#3c77ea",//選中字型顏色
    "backgroundColor":"#fff",//背景顏色
    "position":"bottom", //控制位置： 只有top和bottom
    "borderStyle":"black"
  },
 

2. 自定義配置

1. app.json中

"tabBar": {
    "custom":true,//設定為true
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁" ,
      "iconPath": "img/compont_un.png",
      "selectedIconPath": "img/compont_on.png"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日誌",
      "iconPath": "img/compont_un.png",
      "selectedIconPath": "img/compont_on.png"
    }],
    "color":"#000",//字型顏色
    "selectedColor":"#3c77ea",//選中字型顏色
    "backgroundColor":"#fff",//背景顏色
    "position":"bottom", //控制位置： 只有top和bottom
    "borderStyle":"black"
  },


 

2. 新建檔案custom-tab-bar位置和pages是平級關係,資料夾下的檔案命名為index開頭
   

• index.js程式碼

const app = getApp()//全域性物件
Component({
  properties: {
    selected: {
      type: Number,
      value: 0
    },
    color: {
      type: String,
      value: '#7A7E83'
    },
    selectedColor: {
      type: String,
      value: '#b4282d'
    },
    fontSize: {
      type: Number,
      value: 26
    },
    borderStyle: {
      type: String,
      value: '#f6f6f6'
    },
    backgroundColor: {
      type: String,
      value: '#fff'
    },
    list: {
      type: Array,
      value: [
        {
          "pagePath": "/pages/index/index",
          "iconPath": "/img/compont_on.png",
          "selectedIconPath": "/img/compont_un.png",
          "text": "首頁"
        },
        {
          "pagePath": "/pages/logs/logs",
          "iconPath": "/img/compont_on.png",
          "selectedIconPath": "/img/compont_un.png",
          "text": "我的"
        }
      ]
    }
  },
  methods: {
    switchTab(e) {
      const { index, path } = e.currentTarget.dataset
      if (index === this.properties.selected) return
      wx.switchTab({ url: path })
      this.showItem(index, path)
    },
    showItem(idx, path) {
      this.setData({
        selected: idx
      });
      const detail = { idx, path };
      const option = { bubbles: true, composed: true };
      this.triggerEvent('onTap', detail, option);
    }
  },

})
 

• index.wxml程式碼

<view class="tab-bar tab-bar-bottom" style='background: {{backgroundColor}}'>
	<view class="tab-bar-border {{custom-border}}" style='background: {{borderStyle}}'></view>
	<view class="tab-bar-item" wx:for="{{list}}" wx:key="index" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
		<image class='tab-bar-item-image' src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
		<view class='tab-bar-item-text' style="font-size: {{fontSize}}rpx;color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
	</view>
</view>

• index.wxss

.tab-bar {
  width: 100%;
  height: 110rpx;
  background: white;
  display: flex;
  background-position: center center;
  background-size: 100% 100%;
  /*相容 IOS<11.2*/
  padding-bottom: constant(safe-area-inset-bottom);
  /*相容 IOS>11.2*/
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 110rpx;
}

.tab-bar-border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1rpx;
  background: #f6f6f6;
  box-shadow: 0 -1px 3px 1px #f6f6f6;
}

.tab-bar-item {
  position: relative;
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item-image {
  width: 60rpx;
  height: 60rpx;
}

.tab-bar-item-text {
  font-size: 24rpx;
}

常見問題：點選選單切換會重新重新整理頁面導致樣式沒有切換過來

需要在被導航頁面加上一串程式碼

 /**
   * 生命週期函式--監聽頁面顯示
   selected 就是選中的屬性名根
   據自己定義來
   */
  onShow: function () {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0  //數字是當前頁面在tabbar的索引,如我的查詢頁索引是2，因此這邊為2，同理首頁就為0，審批頁面為1
      })
    }
  },

總結