<template>
     <div class="navbar-list">
      <ul class="flex-imd">
          <li v-for="(item,index) in list" 
              :key="index" 
              class="navbar-item" 		
              :class="activeIndex===index?'act':''" 
              @click="chooseNav(item,index)" 
              :data-navid='item.name'
          >
            {{item.name}}
          </li>
      </ul>
    </div>
</template>

<script>
export default {
    props:{
        list:{
            type:Array,
            default(){
                return []
            }
        },
        activeIndex:{
            type:Number,
            default:0,
        }
    },
    data () {
        return {
            // activeIndex:0, 
        }
    },
    methods: {
        chooseNav (item,index) {
            // console.log(e.target.dataset.navid)
            // this.currNavbar = Number(item.name)
            // this.activeIndex = index; 
            this.$emit('tab',{
                data:item,
                index:index
            })
        }
    }
}
</script>

<style>
.navbar-list{
  width: 100%;
  height: 0.6rem;
  position: relative;
  overflow-x: scroll;
  overflow-y: hidden;
  background: #8020fe;
  color: #fff;
  font-size: 0.34rem;
  border-radius: 0.1rem;
  margin-bottom: 0.3rem;
  padding: 0.08rem 0;
}
.navbar-list>ul{
  /* padding: 0 20px; */
  position: absolute;
  height: 0.6rem;
  left: 0;
  display: flex;
  flex-flow: row nowrap;
}
.navbar-item{
  /* width: 120px; */
  width: 1.6rem;
  padding: 0px 18px;
  box-sizing: border-box;
  height: 0.6rem;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  align-items: center;
  cursor: pointer;
  /* margin-right: 10px; */
}
.navbar-list::-webkit-scrollbar {
  display: none;
}
.navbar-item.act{
  /* background-image: -webkit-linear-gradient(left, #ff512f, #dd2476);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
  font-weight: bold;
  color: #fe3d54;
}
</style>
