VantUI 二级标签栏

一、图例

二、记录点
1、利用伪元素绘制小三角。
2、通过change事件监听选中的标签从而显示对应的二级导航。
3、数据结构
4、参考文献：https://www.w3cschool.cn/vantlesson/vantlesson-3q7s35v1.html
三、代码

<template>
    <div class="index-container">
        <div class="index-layout">
            <!-- 头部 -->
            <nav-bar
                :title="title"
                :type="navType"
            />
            <!-- 内容 -->
            <div class="main-center">
                <transition name="van-slide-left">
                <router-view />
                </transition>
            </div>

            <div class="footer-nav">
                <van-tabbar v-model="active"
                fixed
                :safe-area-inset-bottom="true"
                @change="onChange"
                >
                    <van-tabbar-item 
                    v-for="(item, index) in tabbarList" 
                    :key="index" 
                    :icon="item.icon">{{item.title}}

                        <div class="child-list" v-if="item.children && item.children.length && childActive == index">
                            <span v-for="(elem, s) in item.children" :key="s" @click="spanClick(elem)"><van-icon :name="elem.icon" />{{ elem.title }}</span>
                        </div>
                    </van-tabbar-item>
                </van-tabbar>
           </div>
    </div>
</template>

<script>
export default {
    name: "index",
    data() {
        return {
            title: '恒洋集团',
            navType: 0,
            active: 0,
            childActive: -1,
            tabbarList: [
                {
                    icon: 'home-o',
                    title: '恒洋',
                    path: '/index'
                },
                {
                    icon: 'search',
                    title: '搜索',
                    path: '/ul',
                    children: [
                        {
                            icon: 'search',
                            title: '搜索1',
                            path: '/ul1'
                        }, 
                        {
                            icon: 'search',
                            title: '搜索2',
                            path: '/ul2'
                        }, 
                    ]
                },
                {
                    icon: 'friends-o',
                    title: '管理',
                    path: '/bl',
                    children: [
                        {
                            icon: 'friends-o',
                            title: '管理1',
                            path: '/bl1'
                        }, 
                        {
                            icon: 'friends-o',
                            title: '管理2',
                            path: '/bl2'
                        }, 
                    ]
                },
                {
                    icon: 'user-o',
                    title: '我',
                    path: '/sv'
                }
            ]
        };
    },
    created() {
        console.log('当前路由', this.$router, location);
        // 页面回弹
        document.addEventListener('touchmove',function(ev){ ev.preventDefault();},{passive:false});
    },
    methods: {
        onChange(index) {
            console.log('zzzzzzzz',index);
            this.childActive = index;
        },
        spanClick(item) {
            console.log('mmmmmmmmm', item);
        }
    },
    watch: {
        $route(to,from){
            console.log('获取路由',to);
            this.title = to.meta.title;
            this.navType = to.meta.type;
        }
    },
};
</script>
<style lang="less" scoped>
@mainHeight: calc(~"100vh - 96px");
.index-container{
    .setWH(100vw, 100vh);
    overflow: hidden;
    position: fixed;
}
.main-center{
    .setWH(100%, @mainHeight);
    margin: 50px 0;
    overflow-x: hidden;
    overflow-y: scroll;
}
.footer-nav{
    .setWH(100%, 50px);
    position: fixed;
    bottom: 0;
}
.child-list{
     80px;
    position: absolute;
    bottom: 60px;
    padding: 10px 0;
    border: 1px solid #DDDDDD;
    text-align: center;
    border-radius: 4px;
    span{
         100%;
        display: inline-block;
        padding: 10px 0;
        color: #000000;
        /deep/ .van-icon{
            vertical-align: middle;
            padding-right: 5px;
        }
    }
    &::after{
        content: '';
         10px;
        height: 10px;
        position: absolute;
        bottom: -6px;
        left: 2px;
        border: 1px solid #DDDDDD;
        border-top-color: transparent;
        border-right-color: transparent;
        background-color: #ffffff;
        transform: rotate(-43deg);
    }
}
</style>

四、设计方式二：点击展示二级，再次点击取消二级展示，选中二级收回二级块。

<div class="footer-nav">
<ul>
      <li v-for="(item, index) in tabbarList" :key="index" @click="handleClick(item,index)">
      <div class="nav-main">
          <van-icon v-if="item.icon" :name="item.icon" />
          <span>{{ item.title }}</span>
      </div>
      <div class="child-list" v-if="item.children && item.children.length && item.active">
          <span v-for="(elem, s) in item.children" :key="s" @click="spanClick(elem)">
              <van-icon :name="elem.icon" />{{ elem.title }}
          </span>
      </div>
  </li>
</ul>
</div>

* 存在children子级的增加active: false,作为二级展示隐藏的标识。
tabbarList: [
        {
            icon: 'home-o',
            title: '恒洋',
            path: '/index'
        },
        {
            icon: 'search',
            title: '搜索',
            path: '/ul',
            active: false,
            children: [
                {
                    icon: 'search',
                    title: '搜索1',
                    path: '/ul1'
                }, 
                {
                    icon: 'search',
                    title: '搜索2',
                    path: '/ul2'
                }, 
            ]
        },
        {
            icon: 'friends-o',
            title: '管理',
            path: '/bl',
            active: false,
            children: [
                {
                    icon: 'friends-o',
                    title: '管理1',
                    path: '/bl1'
                }, 
                {
                    icon: 'friends-o',
                    title: '管理2',
                    path: '/bl2'
                }, 
            ]
        },
        {
            icon: 'user-o',
            title: '我',
            path: '/sv'
        }
    ]
};

* 点击事件
handleClick(item, index){
  item.active = !item.active;
},
* 样式
.footer-nav,
.footer-nav ul{
    .setWH(100%, 50px);
    position: fixed;
    bottom: 0;
    font-size: 14px;
    color: #000;
}
.footer-nav ul{
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    li{
         percentage(1/4);
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        border-right: 1px solid #dddddd;
        border-top: 1px solid #dddddd;
        &:last-child{
            border-right: 0;
        }
        div{
            /deep/ .van-icon{
                vertical-align: middle;
                padding-right: 5px;
            }
        }
    }
}