uniapp之简单版本的自定义tab栏切换

​开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

 前言

最开始使用的是uniapp官网里面的 uni-segmented-control 这个属性实现 tab栏切换，但奈何，抵不过业务上的需求，只能 自己手写 tab栏切换

需求是：在某个背景色为黑色的情况下，里面加个tab栏切换，既然背景色为黑色，那字体肯定是要设置为白色的，但，我直接在 组件上设置 color 属性，但奈何它不生效，一气之下只能在组件文件里面更改字体 color 属性，嗯，问题解决了，但，不曾想另一个白色页面也需要设置tab栏切换，

我只能自己找其他组件来实现这个功能，但是呢，我下载另外一个组件，它文档里面是有这个属性，但不知为何会报 查找不到文件的错误，最开始，还以为自己引入（npm  i 下载）后，配置不对，最后才发现，自己需要的这个功能真的在文件里找不到，所以只能自己找办法了，

所幸找到了

总代码 

<template>
  <view>
    <view class="tab_nav">
      <view class="navTitle" v-for="(item,index) in navList" :key="index">
        <view :class="{'active':current === index}" @click="checked(index)">
          {{item.title}}
        </view>
      </view>
    </view>
    <view class="nav_item" v-if="current==0">
      0
    </view>
    <view class="nav_item" v-if="current==1">
      1
    </view>
    <view class="nav_item" v-if="current==2">
      2
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        current: 0,
        navList: [{
          index: 0,
          title: '进行中'
        }, {
          index: 1,
          title: "未支付"
        }, {
          index: 2,
          title: "已完成"
        }]
      }
    },
    methods: {
      checked(index) {
        this.current = index
      },
    }
  }
</script>


<style lang="scss" scoped>
  .tab_nav {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tab_nav .navTitle {
    height: 90rpx;
    line-height: 90rpx;
    width: 100%;
    text-align: center;
    font-size: 32rpx;
    font-family: Alibaba PuHuiTi;
    color: #333;
  }

  .active {
    position: relative;
    color: #1F75FE;
  }

  .active::after {
    content: "";
    position: absolute;
    width: 100rpx;
    height: 4rpx;
    background-color: #1F75FE;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
  }
</style>

效果图

​

总结

这段时间，总是在组件上 更改背景色啊，或者是干嘛的，

例如我之前想让 card 卡片的背景色改为其他色 ，但它

总是不生效，那建议大家，先看看那个组件使用的频率或者是看它全局都是某种色，若是的话，则最好是去组件对应的文件里面，看看，看相关的属性进项修改，