<template>
	<view class="navs">
		<text @tap="navChange(item.val)" :class="current==item.val?'active':''" v-for="(item,index) in navs" :key="index">{{item.text}}</text>
	</view>
</template>

<script>
	export default {
		props:['navs','loading'],
		
		data() {
			return {
				current:"",
			}
		},
		methods: {
			navChange(val){
				if(this.loading==undefined){
					this.current=val;
					this.$emit("change",val);
				}else{
					if(!this.loading){
						this.current=val;
						this.$emit("change",val);
					}
					
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
.navs{
	background-color: white;
	padding:26rpx 40rpx;
	position: fixed;
	top: 44px;
	left: 0;
	right: 0;
	z-index: 2;
	box-shadow:0 0 5px #dadada;
	text{
		color: #202020;
		opacity: 0.5;
		margin-right: 40rpx;
		padding-bottom:3rpx;
		&.active{
			opacity: 1;
			border-bottom:3px solid #1890FF;
		}
	}
}
</style>
