<template>
<view class="tab-container">
    <view class="tab-box">
      <scroll-view
        id="_scroll"
        scroll-x
        class="scroll-view"
        scroll-with-animation
        :scroll-left="scrollLeft"
      >
        <view class="scroll-content">
          <view class="tab-item-box">
            <block v-for="(item, index) in tabData" :key="index">
              <view
                class="tab-item "
                @click="onClick(index)"
				:class="{'tab-item-active':activeIndex===index }">
              {{ item.label || item }}</view>
           
            </block>
            
          </view>
           <view
            class="underLine"
            :style="{
              transform: 'translateX(' + slider.left + 'px)',
            }"
          />1111111111111111111111111111111111111
        </view>
		  </scroll-view>
       
    </view>
    
  </view>
</template>

<script>
	export default {
		name:"my-tabs",
		props:{
			//获取父组件传过来的样式
			config:{
				type:Object,
				default:()=>{return {};}
			},
			//数据
			tabData:{
				type:Array,
				default:()=>{
					return [];
				}
			},
			//选中项
			

		},
		data() {
			return {
				activeIndex:0,
        slider:{
          left:0
        },
         scrollLeft: 0,
				
			};
		},
		
		methods:{
            onClick(val){
				this.activeIndex=val
				// console.log(this.defaultIndex);
		
		     
			}
		}
	}
</script>

<style lang="scss" scoped>
  .tab-container {
  font-size: $uni-font-size-base;
  height: 45px;
  line-height: 45px;
  background-color: $uni-bg-color;
  .tab-box {
    width: 100%;
    height: 45px;
    display: flex;
    position: relative;
    .scroll-view {
      white-space: nowrap;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      .scroll-content {
        width: 100%;
        height: 100%;
        position: relative;

        .tab-item-box {
          height: 100%;
      
          .tab-item {
            height: 100%;
            display: inline-block;
            text-align: center;
            padding: 0 15px;
            position: relative;
            text-align: center;
            color: $uni-text-color;
		
             &-active {
              color: $uni-text-color-hot;
            }
          }
        }
        .underLine{
         position: absolute;
          height: 30px;
          width:24px;
          background-color: red;
          border-radius: 3px;
          transform: .5s;
        
     
         
        }
      
      }
    }
  }

 
  
}
</style>