uniapp 仿写 vant-tabs

<template>
  <view class="tabs">
    
    <view class="tabs-box" :style="{width: data.length > 4?'':'100%'}">
      
      <view class="tabs-item" :style="{width: data.length > 4?'auto':100 / data.length + '%'}" v-for="(item,index) in data" @click="trans(index)">
        <view :class="item.isShow?'tabs-item-text tabs-item-text-show':'tabs-item-text'">
          {{item.name}}
        </view>
      </view>
      
      <view class="tabs-scoll">
        <view class="tabs-scoll-item" :style="{marginLeft: transform +'%'}">
          
        </view>
      </view>
      
    </view>
    
  </view>
</template>
<!-- 
  父组件需传递一下数据：
 传递数组
  [
    {
      name:'班级信息',//名称
      isShow:true//是否高亮
    },
    {
      name:'个人信息',
      isShow:false
    }
  ] 
  传递回调函数事件 @chageTab
 -->
<script>
  export default {
    name:"tabs",
    props:['data'],
    data() {
      return {
        transform:0,
        item:0,//移动一份的百分百
      };
    },
    created() {
      setTimeout(()=>{
        this.transform = 50 / this.data.length || 0;//需要移动的
        this.item = 50 / this.data.length || 0;
      },300)
    },
    methods:{
      trans(v){
        this.$emit('chageTab',v);
        for(let i = 0;i < this.data.length; i++){
          this.data[i].isShow = false;
        }
        this.data[v].isShow = true;
        if(v == 0){
          this.transform = this.item;
          return;
        }
        this.transform = this.item * (v * 2 + 1);
      }
    }
  }
</script>

<style lang="less" scoped>
  .tabs::-webkit-scrollbar{
      display: none;
    	width: 0;
    	height: 0;
    	color: transparent;
  }
  
  .tabs{
    width: 100%;
    height: 94rpx;
    overflow-x: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid rgba(221, 221, 221, 1);
    
    .tabs-box{
      display: flex;
      align-items: center;
      position: relative;
      
      .tabs-item{
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        
        .tabs-item-text{
          font-weight: 400;
          font-size: 32rpx;
          color: #666666;
          text-align: center;
          font-style: normal;
          white-space: nowrap;
          padding: 0 30rpx;
        }
        
        .tabs-item-text-show{
          font-weight: 600 !important;
          font-size: 36rpx !important;
          color: #175FE9 !important;
        }
        
      }
      
      .tabs-scoll{
        position: absolute;
        bottom: -22rpx;
        width: 100%;
        height: 8rpx;
        
        .tabs-scoll-item{
          width: 100rpx;
          height: 8rpx;
          background: #245ED8;
          // border-radius: 5rpx;
          transition: all .5s;
          transform: translateX(-50%);
        }
        
      }
      
    }
    
  }
</style>

<Tabs :data="tab" @chageTab="changeTab"></Tabs>
父组件使用方法 changeTab函数会返回一个当前索引

效果展示

记录一下