小程序自定义Tabber，使其图标突出

1、首先需要在app.json中配置一个tabbar

 "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/home/home",
        "iconPath": "./custom-tab-bar/images/home1.png",
        "selectedIconPath": "./custom-tab-bar/images/home2.png",
        "text": "首页"
      }, {
        "pagePath": "pages/im/im",
        "iconPath": "./custom-tab-bar/images/xiaoxi1.png",
        "selectedIconPath": "./custom-tab-bar/images/xiaoxi2.png",
        "text": "消息"
      },{
        "pagePath": "pages/my/my",
        "iconPath": "./custom-tab-bar/images/my1.png",
        "selectedIconPath": "./custom-tab-bar/images/my2.png",
        "text": "我的"
      }
    ]
  },

2、在根目录定义自定义tabbar custom-tab-bar

在其中放入image文件夹
注意：其中的图片不能有中文否则会出现部分手机不能显示的问题
wxml代码 就是简单的wxml 我用到过 cover-view 跟cover-image 会在安卓机出现图标跟随屏幕滑动的问题
所以换成简单的view标签就行 可以再这个组件中随意改动样式

<view class="container">
	<view class="item" bindtap='switchTab' wx:for="{{list}}" wx:key="{{index}}" data-index="{{index}}" data-url="{{item.pagePath}}">
		<view class="{{index == 1?'top':''}}">
			<image class="icon {{index == 2?'my':''}}" src='{{index==curIndex?item.selectedIconPath:item.iconPath}}'></image>
		</view>
		<view wx:if="{{index != 1}}" class="text" class="{{index==curIndex?'textStyle':'lanse'}}">{{item.text}}</view>
	</view>
</view>

js代码 在data中定义初始量curIndex: 0, 在点击事件中获取地址路径跟索引 然后用wx.setStorageSync(）进行缓存

Page({
  data: { 
    curIndex: 0,
    list: [
      {
        pagePath: "/pages/home/home",
        iconPath: "./images/home1.png",
        selectedIconPath: "./images/home2.png",
        text: "首页"
      }, {
        pagePath: "/pages/im/im",
        iconPath: "./images/xiaoxi1.png",
        selectedIconPath: "./images/xiaoxi2.png",
        text: "消息"
      },{
        pagePath: "/pages/my/my",
        iconPath: "./images/my1.png",
        selectedIconPath: "./images/my2.png",
        text: "我的"
      },
    ]
  },
  switchTab(e) {
    console.log(e);
    let url = e.currentTarget.dataset.url
    let index = e.currentTarget.dataset.index
    wx.switchTab({
      url
    })
    wx.setStorageSync('curIndex', index)
  },
})

在需要的页面的js中onshow生命周期中加入以下代码，定义了几个就写几个 curIndex分别为 0 、1 、2对应三个页面

 this.getTabBar().setData({
    curIndex: 0
   })

css代码

.container {
  height: 98rpx;
  width: 100%;
  background: #fff;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  padding: 0;
  position: fixed;
  bottom: 0;
}

.item {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.icon {
  width: 54rpx;
  height: 50rpx;
  margin: 0 auto;
}

.my {
  width: 40rpx !important;
}
.top {
  margin-top: -100rpx;
  background-color: red;
  width: 100rpx;
  height: 100rpx;
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  position: relative;
}
.top image{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.textStyle {
  font-size: 24rpx;
  color: #74b4ff;
  font-weight: 600;
}

.lanse {
  font-size: 24rpx;
  font-weight: 600;
  color: #999999;
}