<template>
	<view class="swipeTab">
		<view v-for="(item,index) in menuList" :key="index"
		class="swipeTab-item" :class="{'tabTrue':currentIndex===index}"
		@tap="changeTab(index)">
			{{item}}
		</view>
	</view>
</template>

<script>
export default {
  props: {
    menuList: {
      type: Array,
      default: () => {
        return []
      }
    },
    activeTab: {
      type: Number,
      default: 0
    }
  },
  watch: {
    activeTab(n, o) {
      this.currentIndex = n
    }
  },
  data() {
    return {
      currentIndex: 0
    }
  },
  methods: {
    changeTab(index) {
      this.currentIndex = index
      this.$emit('changeTab', index)
    }
  }
}
</script>

<style lang="scss" scoped>
.swipeTab{
  z-index: 99999;
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
  position: relative;
  height: 22px;
  background: #FFFFFF;
  .swipeTab-item{
    line-height: 1px;
    color: #999;
    border-radius: 999em;
    padding: 10px 10px;
    border: 1px solid #999;
  }
  .tabTrue{
    color:#5fd0e4;
    border: 1px solid #ebf8fc;
    background: #ebf8fc;
   }
 }
</style>
