Vue.js-TabBar实现

最新推荐文章于 2024-05-18 18:15:28 发布

guardwhy

最新推荐文章于 2024-05-18 18:15:28 发布

阅读量344

点赞数 1

分类专栏： # Vue.js

本文链接：https://blog.csdn.net/hxy1625309592/article/details/116376917

版权

本文档介绍了如何使用Vue.js来实现TabBar组件。详细步骤包括项目目录创建，涉及的文件如App.vue, MainTabBar.vue, TabBar.vue, TabBarItem.vue等，以及执行结果的展示和路径简写说明。" 107380861,9526063,移动开发页面传值技术详解,"['移动开发', 'Android', '页面跳转', '数据传递', '应用开发']

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

1.1 项目目录

创建项目: vue init webpack tabbardemo

1.2 项目实现代码

项目所需的图片：https://pan.baidu.com/s/1T0LxSsT4yGamy3giIKcNFw 提取码：bo79

App.vue

<template>
  <div id="app">
    <!--使用组件-->
    <router-view></router-view>
   <main-tab-bar></main-tab-bar>
  </div>
</template>

<script>
// 导入主键
import MainTabBar from "components/maintabbar/MainTabBar";

export default {
    
  name: 'App',
  // 注册组件
  components:{
    
    MainTabBar
  }
  
}
</script>

<style>
  @import "./assets/css/base"
</style>

MainTabBar.vue

<template>
  <tab-bar>
    <tab-bar-item path="/home" active-color="pink">
      <img slot="item-icon" src="~assets/img/tabbr/home.svg" alt="">
      <img slot="item-icon-active" src="~assets/img/tabbr/home_active.svg" alt="">
      <div slot="item-text">首页</div>
    </tab-bar-item>
    <tab-bar-item path="/category" active-color="pink">
      <img slot="item-icon" src="~assets/img/tabbr/category.svg" alt="">
      <img slot="item-icon-active" src