「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」。

前言

刚开始写小程序的时候，大多数用的都是微信小程序自带的taber，但是灵活性比较低，比如不能自定义一些东西等...，所以也算是被迫（本人比较懒）开发了一套自定义taber组件，现在给大家展示一下。

taber页面部分

taber是放在底部的，而且不管是那个页面，都要把taber露出来，所以要用cover-view--覆盖在原生组件之上的文本视图标签（官方解释）

<cover-view class="cu-bar tabbar bg-white shadow foot"></cover-view>

css样式要加上 display:flex这样才能平均分布，bg-white为背景颜色，这个可以自行设置，shadow加上一点点黑色的阴影

.cu-bar {
    display: flex;
    position: relative;
    align-items: center;
    min-height: 100rpx;
    justify-content: center;
}
.cu-bar.tabbar.shadow {
    box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1);
}

渲染taber列表，这个是可以自定义的可以是二个、三个、四个等...，所以要用到 wx:for ，全程用cover-view代替view这样才能是权限最高，显示在最上层。

<cover-view class="action" wx:for="{{navList}}" wx:key="index" data-path="{{item.path}}" data-index="{{index}}" bindtap="switchTab"></cover-view>

给每个cover-view加上key，这样让dom更好分辨。点击切换用到 bindtap事件，需要带参数，这样才能拿到具体的路径path。点击事件传递的方法data-key=value，接收参数的方法e.currentTarget.dataset.key

  methods: {
    switchTab(e) {      
      const path = e.currentTarget.dataset.path;
    }
  },

icon图标和名称设置必须也要用cover-view，因为只支持嵌套 cover-view、cover-image、button，用其他的一概不展示。

<cover-view class='cuIcon-cu-image'>
    <cover-image src='{{item.iconPath}}' class="animation"></cover-image>
</cover-view>
<cover-view class="text-color" >{{item.text}}</cover-view>

数据格式

推荐使用更明了的数据格式，首先进入小程序这个是要第一个展示的，不能因为处理数据的原因导致进程缓慢。

navList: [
      {
        "pagePath": "/pages/index/index",
        "iconPath":"/img/icon1.png",
        "selectedIconPath": "/img/nav31.png",
        "text": "首页"
      }, {
        "pagePath": "/pages/query/query",
        "iconPath":"/img/icon2.png",
        "selectedIconPath": "/img/nav2.png",
        "text": "查询"
      }
      , {
        "pagePath":"/pages/my/my",
        "iconPath":"/img/icon3.png",
        "selectedIconPath": "/img/nav3.png",
        "text": "我的"
      }
    ]

总结

总体来说运用的都是最基础的知识点，长时间的业务开发很容易忽略掉最基础的知识，通过此组件的开发也让我复习了之前的知识，总体感觉还是很不错。（写的时候心慌一匹）

教大家实用的微信小程序taber组件开发

前言

taber页面部分

数据格式

总结