最近遇到一个需求

咋眼一看  跟我们所希望的 相差甚远啊  咋办呢
 

看官方api，有个cunstom属性 自定义  但是对于原生组件   心好虚啊
 

能不能另辟蹊径  用自定义组件呢   辣么原生的咋办呢
 

当然 是 才有原生的cover-image 做条件控制  把原生的toast   给隐藏 不展示   wx.hideToast() 一直到底了

// tabBar.vue  

<template>
  <cover-view class="tab-bar">
    <cover-view class="tab-bar-border"></cover-view>
    <cover-view
      v-for="(item,index) in list"
      :key="index"
      class="tab-bar-item"
      :data-path="item.pagePath"
      :data-index="index"
      @click="switchTab"
    >
      <cover-image
        :src="selected == index ? item.selectedIconPath : item.iconPath"
        :class="{'icon': index===1}"
      ></cover-image>
      <cover-view style="color:  #7CCFFE" v-if="selected == index">{{item.text}}</cover-view>
      <cover-view style="color: #808080" v-else>{{item.text}}</cover-view>
    </cover-view>
  </cover-view>
</template>

<script>
export default {
  props: ['selected'],
  data () {
    return {
      // selected: 0,
      list: [{
        pagePath: '../../pages/index/main',
        iconPath: '../../static/tabs/home_normal.png',
        selectedIconPath: '../../static/tabs/home_active.png',
        text: '首页'
      }, {
        text: '',
        pagePath: '../../pages/selectChain/main',
        iconPath: '../../static/tabs/xundian.png',
        selectedIconPath: '../../static/tabs/xundian.png',
        isSpecial: true
      }, {
        pagePath: '../../pages/mine/main',
        iconPath: '../../static/tabs/my_normal.png',
        selectedIconPath: '../../static/tabs/my_active.png',
        text: '我的'
      }]
    }
  },
  methods: {
    switchTab (e) {
      const { currentTarget: { dataset: {
        path, index
      } } } = e
      console.log(path, index)
      wx.switchTab({ url: path })
      // this.$setData({
      //   selected: index
      // })
    }
  }
}
</script>

<style lang="less" scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

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

.tab-bar-item cover-image {
  width: 27px;
  height: 27px;
}

.tab-bar-item cover-image.icon {
  width: 100rpx;
  height: 100rpx;
}

.tab-bar-item cover-view {
  font-size: 10px;
}
</style>

当然了， app.json  tabbar  改定义的 还是得定义   组件也是运用于 tabbar 的list
 

vue  组件模式插入
<tab-bar :selected="2"></tab-bar>  

很容易实现了  但是呢 样式肯定要根据页面调整的

但 cover-view 坑肯定是有的 局限性大  还是希望微信小程序继续改良 

效果展示：

有所出入  主要是cover-view  局限  定位 也不能超出