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

前言

最开始使用的是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 卡片的背景色改为其他色 ，但它

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

后续

因下面的代码 在工作中很常用（就样式好看） 就 写下来记录下，等后续使用时直接 CV

.flex {
  display: flex;
}

.justify-between {
  justify-content: space-between
}

最外层view标签   <view class="" style="padding: 82rpx 68rpx 0 74rpx;color:#328fb1">

 <view class="flex justify-between">
      <view class="scroll-view-item_H" v-for="(item,index) in navList" :key="index">
        <view :class="{'active':currentInd === index}" @click="checked(index)">
          {{item.title}}
        </view>
      </view>
    </view>
    <view class="" v-if="currentInd===0">
      1222
    </view>
    <view class="" v-if="currentInd===1">
      3412
    </view>



data ：

  currentInd: 0,
        navList: [{
          index: '1',
          title: '未完成'
        }, {
          index: '2',
          title: "已完成"
        }],


methods ：

 checked(index) {
        this.currentInd = index
      },


style 样式

 $color : #427cb2;
  $fff: #fff;

  .scroll-view-item_H {
    width: 212rpx;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    font-size: 16px;
    border-radius: 20rpx;
    // margin-right: 38px;
    background-color: $fff;
    margin-right: 20rpx;
  }

  .active {
    border-radius: 20rpx;
    color: $fff;
    background-color: $color;
  }