newyqg/pages/order/order1.vue

<template>
	<view class="content">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="{ current: tabCurrentIndex === index }" @click="navTo(index)">{{ item.text }}</view>
		</view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"  :class="{current:tabCurrentIndex===0}">
			<swiper-item v-for="(item,index) in navList">
				<view class="swiper-item">1111</view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCurrentIndex: 0, //当前选择
				navList: [{
						state: 0,
						text: '待付款',
						loadingType: 'more',
						orderList: [],
						page: 1, //当前页数
						limit: 10 //每次信息条数
					},
					{
						state: 1,
						text: '待发货',
						loadingType: 'more',
						orderList: [],
						page: 1, //当前页数
						limit: 10 //每次信息条数
					},
					{
						state: 2,
						text: '待收货',
						loadingType: 'more',
						orderList: [],
						page: 1, //当前页数
						limit: 10 //每次信息条数
					},
					{
						state: 3,
						text: '待评价',
						loadingType: 'more',
						orderList: [],
						page: 1, //当前页数
						limit: 10 //每次信息条数
					},
					{
						state: 4,
						text: '已完成',
						loadingType: 'more',
						orderList: [],
						page: 1, //当前页数
						limit: 10 //每次信息条数
					}
				]
			}
		},
		methods: {
			navTo(index){
				this.tabCurrentIndex = index
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background: $page-color-base;
		height: 100%;
	}
	.navbar{
		display: flex;
		padding: 0 5px;
		height: 40px;
		background-color: #FFFFFF;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 100;
		
		.nav-item{
			flex: 1;
			display: flex;
			text-align: center;
			justify-content: center;
			font-size: 15px;
			height: 100%;
			position: relative;
			&.current{
				border-bottom: 2rpx solid #F0AD4E;
				color:#F0AD4E ;
				
			}
			
			
			
		}
	}
	
</style>