基于vue实现移动端tab切换方式

梦里梦外; 2023-06-25 04:53 21阅读 0赞

废话不多说了,这种方法比较灵活, 简单

思路

1: 创建导航组件

2: 创建子组件

3: 配置子组件路由

接下我们来看一下代码吧

导航组建

<template>
    	<div>
    		
    		<header id="header">
    			<div class="pure-box flex-box-x">
    				<div class="left flex-y-center"></div>
    				<div class="center col-xs-x flex-xy-center">
    					寄售中心
    				</div>
    				<div class="right flex-y-center"></div>
    			</div>
    		</header>
    		
    		<div class="tabs flex-box-x" id="tabs">
    			<div class="item col-xs-x" v-for="(vo, index) in tabs_menu" :key="index" v-bind:class="{'active': active == index}" tapmode @click="toggle(index, vo.view)"><span>{
       {vo.name}}</span></div>
    		</div>
    		
    		<component :is="currentView"></component>
    	</div>
    </template>
    	
    <script>
    	import unpaid from '../../views/new/on_consignment_unpaid'		// 未付款
    	import stay from '../../views/new/on_consignment_stay'			// 待寄售
    	import sale from '../../views/new/on_consignment_sale'			// 寄售中
    	import receipt from '../../views/new/on_consignment_receipt'	// 已寄售
    	import refund from '../../views/new/on_consignment_refund'		// 已退款
    	export default{
    		name: 'OnConsignment',
    		components: {
    			unpaid,
    			stay,
    			sale,
    			receipt,
    			refund
    		},
    		data () {
    			return {
    				// 顶部切换id
    				active:0,
    				currentView:'unpaid',
    				tabs_menu: [{
    					name: "未付款",
    					view: "unpaid"
    				}, {
    					name: "待寄售",
    					view: "stay"
    				}, {
    					name: "寄售中",
    					view: 'sale'
    				}, {
    					name: "已售出",
    					view: 'receipt' 
    				}, {
    					name: "已退款",
    					view: 'refund'
    				}],
    			}
    		},
    		methods: {
    			toggle(i, v) {
    				this.active = i
    				this.currentView = v
    			}
    		},
    	}
    </script>
    
    <style scoped>
    	.tabs {
    		height: 0.88rem;
    		background: #fff;
    		border-bottom:   1px solid #E6E6E6
    	}
    	
    	.tabs .item {
    		align-self: flex-end;
    	}
    	
    	.tabs .item span {
    		font-size: 0.28rem;
    		font-weight:400;
    		color: #11270E;
    	}
    	
    	.tabs .item.active span {
    		color: #ed3645;
    	}
    </style>

子组件就不多说了,根据自己的需求

我们来看看子组件的路由配置vue-cli    src - router - index.js

const router = new Router({
    	mode: 'history',
    	routes: [
    		{	
    			//寄售中心
    			path: '/on_consignment',
    			name: '寄售中心',
    			component: () => import('@/views/new/on_consignment'),
    			children: [
    				{	
    					// 未付款
    					path: '/unpaid',
    					name: 'Unpaid',
    					component: () => import('@/views/new/on_consignment_unpaid')
    				},
    				{	
    					// 待寄售
    					path: '/stay',
    					name: 'OnConsignmentStay',
    					component: () => import('@/views/new/on_consignment_stay')
    				},
    				{
    					// 寄售中
    					path: '/sale',
    					name: 'sale',
    					component: () => import('@/views/new/on_consignment_sale')
    				},
    				{
    					// 已出售
    					path: '/receipt',
    					name: 'receipt',
    					component: () => import('@/views/new/on_consignment_receipt')
    				},
    				{
    					// 已退款
    					path: '/refund',
    					name: 'refund',
    					component: () => import('@/views/new/on_consignment_refund')
    				},
    			],
    		},
    		
    		
    	]
    });