vant 底部导航组件的实现（tabbar）

最新推荐文章于 2024-08-14 11:29:40 发布

aiamvb6455

最新推荐文章于 2024-08-14 11:29:40 发布

阅读量6.9k

点赞数 1

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/Jasonpub/p/10592390.html

版权

本文介绍了如何使用Vant框架设计一个底部导航组件，包括路由跳转的实现、选项卡的工作原理和路由拦截的配置。通过这个教程，你可以理解在JavaScript和UI设计中如何创建一个功能完整的底部导航栏。

摘要由CSDN通过智能技术生成

简单设计一个底部导航的功能组件

1.路由跳转

2.选项卡的原理

3.路由拦截

<template>
  <van-tabbar v-model="active" class="active_tab">
    <van-tabbar-item
      v-for="(item,index) in tabbars"
      :key="index"
      @click="tab(index,item.name)"
    >
      <span :class="currIndex == index ? active:''">{
   {item.title}}</span>
      <template slot="icon" slot-scope="props">
        <img :src="props.active ? item.active : item.normal">
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  name: "tabbar",
  data() {
    return {
      currIndex: 0,
      active: 0,
      tabbars: [
        {
          name: "home",
          title: "首页"