微信小程序自定义tabbar(不使用原生tabbar)

假如想完全自定义微信小程序的tabbar，实现如下效果：

实现步骤：

a.创建一个tabbar组件

// .wxml文件
<view class="tabbar">
  <navigator wx:for="{{tabbarList}}" wx:key="txt" url="{{item.url}}" class="tabbar-item" open-type="switchTab" hover-class="nav-hover">
    <image wx:if="{{index === 2}}" class="img" src="/images/{{item.img}}"></image>
    <image wx:else class="image" src="/images/{{activateIndex == index?item.selectedImg:item.img}}"></image>
    <text class="txt">{{item.txt}}</text>
  </navigator>
</view>

// .js文件
Component({
  properties: {
    activateIndex: {
      type: Number,
      value: 0,
    },
  },
  data: {
    tabbarList: [
      {
        txt: '首页',
        url: '/pages/homePage/homePage',
        img: 'home_icon_default.png',
        selectedImg: 'home_icon_activate.png'
      },
      {
        txt: '素材',
        url: '/pages/libary/libary',
        img: 'classification_icon_default.png',
        selectedImg: 'classification_icon_activate.png'
      },
      {
        txt: '',
        url: '/pages/read/read',
        img: 'home_icon_reading.png',
        selectedImg: 'home_icon_activate.png'
      },
      {
        txt: '活动',
        url: '/pages/activity/activity',
        img: 'activities_icon_default.png',
        selectedImg: 'activities_icon_activate.png'
      },
      {
        txt: '我的',
        url: '/pages/my/my',
        img: 'mine_icon_default.png',
        selectedImg: 'mine_icon_activate.png'
      },
    ],
  },
  methods: {
  }
})
  
// .wxss文件
.tabbar {
  height: 114rpx;
  width: 100%;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow:0 2px 13px 0px rgba(153,153,153,0.2);
  z-index: 10000;
}
.tabbar-item {
  flex: 1;
  text-align: center;
  font-size: 20rpx;
  color: #999;
}
.image {
  width: 42rpx;
  height: 42rpx;
}
.txt {
  text-align: center;
  display: block;
}
.img {
  width: 110rpx;
  height: 110rpx;
  border-radius: 55rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 75rpx;
}
.nav-hover {
  background-color: none;
}

这里需要说明的一点，组件如何实现当前选中的效果：
在.js文件中添加了一个activateIndex属性，此属性是需要从父组件中传值过来的，用来代表父组件的索引状态值；
在.wxml中 <image wx:else class=“image” src="/images/{{activateIndex == index?item.selectedImg:item.img}}"> 在循环体中，如果从父组件传过来的activateIndex值为循环中的index值，则src属性指向了选中的图标，否则指向未选中的图标，这样就实现了当前页图标高亮选中的效果了

b.在父组件中引用组件
tabbar组件中已经定义好了需要跳转的几个页面路径，以homPage页面为例来说明：
在homePage.wxml中写入 <tabbar activateIndex="{{0}}" /> 即可， 因为首页是tabbar的第一个内容，所以索引为0

c.配置app.json文件
设置app.json文件是为了达到和原生tabbar的一样的页面缓存效果
list属性设置为在组件中定义的页面路径
backgroundColor属性最好设置成"transparent"透明效果

"tabBar": {
    "color": "white",
    "borderStyle": "white",
    "backgroundColor": "transparent",
    "list": [
      {
        "pagePath": "pages/homePage/homePage"
      },
      {
        "pagePath": "pages/libary/libary"
      },
      {
        "pagePath": "pages/read/read"
      },
      {
        "pagePath": "pages/activity/activity"
      },
      {
        "pagePath": "pages/my/my"
      }
    ]
  }
}

d.配置app.js
在onLaunch中，需要隐藏一下原生tabbar，否则会出现双下巴
使用 wx.hideTabBar() 进行隐藏

关于此种方式创建tabbar的一些缺点：
一个显而易见的问题就是第一次点击tabbar里面的内容的时候页面会闪烁；
还有一个问题就是：刚进入小程序页面的时候，原生的tabbar会一闪而过，然后消失，好像并不能一开始就完全隐藏掉；
如果你们有好的方法来解决这两个问题，请告诉我哦~