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

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

思路

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>
<!--:is实现多个组件实现同一个挂载点-->
<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')
},
],
},


]
});