微信小程序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
      })
    }
  },

总结

序号	左对齐
1	custom-tab-bar 要和pages同一层
2	自定义tabbar时app.json中的tabbar中的custom:true
3	iconPath的图标大小不能超过40k
4	borderStyle：仅支持black、white，默认black
5	颜色：仅支持16六进制的颜色表示方法
6	自定义菜单出不来版本问题： 版本不能太低 2.5.0就可以