vue 底部导航,vue实现头部导航栏的思路

　　本文详细阐述了Vue实现TabBar底部导航栏的方法，并通过实例代码进行了详细介绍。对大家的学习或工作都有一定的参考价值。让我们和边肖一起为有需要的朋友学习吧。

目录

　　项目描述：项目目录：TabBar效果预览：TabBar实现思路一、如果下面有单独的TabBar组件，如何打包二、如何打包？TabBar中的实际内容由外界决定。三。自定义TabBarItem，可用于导入图片和文本项。可以建立文件目录。简介文件别名代码App.vue代码MainTabBar.vue代码TabBar.vue代码index.js路由配置代码home.vue代码category.vue代码profile.vue代码cart.vue代码Base.css代码img图片资源总结：主要难点：

项目介绍：

　　要求：要求动态改变tabbar中的字符，动态改变和增加字符对应的图片，相应改变字符的颜色，动态改变和增加TabBaritem的图片，使整个项目具有灵活性，利用slots、routes传递父子组件的值，利用$router实现点击项会显示对应的页面。非常全面。在项目开发中遇到类似项目时，只需要复制主要代码就可以构建项目的大致框架。

项目目录：

TabBar效果预览：

TabBar实现思路

一、如果在下方有一个单独的TabBar组件，如何封装

　　自定义tabbar组件，在APP中使用。

　　让TabBar在底部，设置相关的样式。

二、TabBar中现实的内容由外界决定。

　　定义插槽。

　　弹性分数标签栏。

三、自定义TabBarItem，可以传入图片和文字

　　自定义tabbarItem，并定义两个槽：图片和文本。

　　将div包裹在两个槽的外层来设置样式。

　　填充槽以实现底部TabBar的效果。

　　该方法切实可行，易于实施。首先介绍一下目录。

项目文件目录建立

文件目录介绍

　　我建立了一个views文件夹，其中包含五个文件。这五个文件包含五个vue文件，分别对应导航栏下的每个按钮。

　　在assets下设置css和img文件夹，放置tabbar按钮所需的图片和基础类。

　　在component文件夹中建立一个MainTabBar.vue文件和一个TabBar文件夹，MainTabBar的子组件和各种与slot相关的文件都放在这个文件夹中。

　　路由器文件夹下的索引文件配置路由文件

　　Main.js是项目的入口文件，项目中的所有页面都会加载main.js，因此main.js主要有三个功能：

　　实例化VUE

　　放置项目中经常用到的插件和CSS样式，比如网络请求axios和vue-resource，图片的懒加载模块：vue-；azyload

　　存储基本信息等全局变量。

　　每个文件夹中的代码实现

　　第一步，文件多，引用往往会带来404错误。这里我们先建立文件别名，vue会建立文件别名进行详细说明。

　　找到resolve对象并在alias中写入每个文件的别名：

文件起别名代码

　　代码：

　　解决：{

　　扩展名：[。js ，。vue ，。json]，

　　别名：{

　　@: resolve(src )，

　　 assets: resolve(src/assets )。

　　 components :resolve( src/components )。

　　 views :解析( src/views )，

　　}

　　},

App.vue代码

　　在App.vue中引用MainTabBar组件和每个tabbaritem对应的文件：

　　模板

　　div id=应用程序

　　路由器视图/路由器视图

　　主选项卡栏/主选项卡栏

　　/div

　　/模板

　　脚本类型=“模块”

　　从“组件/maint bar”导入maint bar

　　导出默认值{

　　名称：“应用程序”，

　　组件：{

　　维护栏

　　}

　　}

　　/脚本

　　风格

　　@ import assets/CSS/base ；

　　/风格

MainTabBar.vue代码

　　MainTabBar组件代码：数字、颜色、文本等。要求可修改的TabBarItem是动态的。需要创建各种插槽。

　　模板

　　差异

　　标签栏

　　tab-bar-item path=/home active color=紫色

　　img slot= item-icon src= ~ assets/img/tabbar/shou ye . png alt=

　　img slot= item-icon-active src= ~ assets/img/tabbar/shouye . active . png alt=

　　Div slot=item-text 主页/div

　　/选项卡栏项目

　　tab-bar-item path=/category active color=紫色

　　img slot= item-icon src= ~ assets/img/tabbar/fenlei。png alt=

　　img slot= item-icon-active src= ~ assets/img/tabbar/fenlei。活跃。png alt=

　　div slot=item-text 分类/div

　　/选项卡栏项目

　　tab-bar-item path=/cart active color=紫色

　　img slot= item-icon src= ~ assets/img/tabbar/gouweche。png alt=

　　img slot= item-icon-active src= ~ assets/img/tabbar/gouweche。活跃。png alt=

　　div slot=item-text 购物车/div

　　/选项卡栏项目

　　选项卡栏项目路径=/profile activeColor=purple

　　img slot= item-icon src= ~ assets/img/tabbar/沃德。png alt=

　　img slot= item-icon-active src= ~ assets/img/tabbar/沃德。活跃。png alt=

　　div slot=item-text 我的/div

　　/选项卡栏项目

　　/选项卡栏

　　/div

　　/模板

　　脚本

　　从"组件/标签栏/标签栏"导入标签栏

　　从"组件/tabbar/TabBarItem "导入TabBarItem

　　导出默认值{

　　名称： MainTabBar ，

　　组件：{

　　TabBar，

　　TabBarItem

　　}

　　}

　　/脚本

　　风格

　　/风格

TabBar.vue代码

　　TabBar.vue文件，改文件为可维护酒吧。某视频剪辑软件中的子组件：

　　模板

　　div id=tab-bar

　　插槽/插槽

　　/div

　　/模板

　　脚本

　　导出默认值{

　　名称：" TabBar "

　　}

　　/脚本

　　风格

　　/风格

TabBarItem.vue代码

　　TabBarItem.vue为可维护酒吧。某视频剪辑软件的子组件

　　模板

　　div class= tab-bar-item @ click= item click

　　div v-if=！ isActive

　　插槽名称=项目图标/slot

　　/div

　　div-否则

　　slot name= item-icon-active /slot

　　/div

　　div:style= active style slot name= item-text /slot/div

　　/div

　　/模板

　　脚本

　　导出默认值{

　　名称： TabBarItem ，

　　道具：{

　　路径：字符串，

　　activeColor:{

　　类型：字符串，

　　默认值："红色"

　　}

　　},

　　data(){

　　返回{

　　//isActive:true

　　}

　　},

　　计算值：{

　　isActive(){

　　//判断

　　//返回这个. route.path.indexOf(this.path)！==-1

　　//返回这个10.99 $ route . path===this . path

　　归还这个. route.path.indexOf(this.path)？假：真

　　},

　　activeStyle(){

　　把这个还回去isActive？{color:this.activeColor}:{}

　　}

　　},

　　方法：{

　　itemClick(){

　　这个. router.replace(this.path)

　　}

　　}

　　}

　　/脚本

　　风格

　　#选项卡栏{

　　显示器：flex

　　}

　　#选项卡栏{

　　背景色：# f6f6f6

　　border-top:2px # CCC；

　　位置：固定；

　　左：0;

　　右：0;

　　底部：0;

　　盒影：0px -1px 1px rgba(100，100，100，2);

　　}。选项卡栏项目{

　　flex:1；

　　文本对齐：居中；

　　高度：49px

　　字体大小：14px

　　}。标签栏-项目图像{

　　宽度：24px

　　高度：24px

　　margin-top:3px；

　　垂直对齐：居中；

　　margin-bottom:3px；

　　}。活动{

　　颜色：红色；

　　}

　　/风格

index.js路由配置代码

　　路由器文件夹下的指数文件为路由的配置：

　　从“vue”导入某视频剪辑软件

　　从" vue路由器"导入武鲁特

　　const Home=()=import( views/Home/Home )

　　常量类别=()=导入(视图/类别/类别)

　　const Cart=()=import(视图/购物车/购物车)

　　const Profile=()=import(./视图/配置文件/配置文件)

　　//1.安装插件

　　Vue.use(VueRouter)

　　//2.创建路由对象

　　常量路由=[

　　{

　　路径：,

　　重定向："/home "

　　},

　　{

　　路径："/home "，

　　组件：主页

　　},

　　{

　　路径："/类别",

　　组件：类别

　　},

　　{

　　路径："/购物车"，

　　组件：购物车

　　},

　　{

　　路径："/个人资料"，

　　组件：配置文件

　　}

　　]

　　const router=new VueRouter({

　　路线，

　　模式："历史"

　　})

　　//3.导出路由器

　　导出默认路由器

　　视图中的家代码，推车代码，个人资料代码，类别代码：

home.vue代码

　　模板

　　氘首页/h2

　　/模板

　　脚本

　　导出默认值{

　　名称："家"

　　}

　　/脚本

　　风格

　　/风格

category.vue代码

　　模板

　　氘分类/h2

　　/模板

　　脚本

　　导出默认值{

　　名称："家"

　　}

　　/脚本

　　风格

　　/风格

profile.vue代码

　　模板

　　氘个人/h2

　　/模板

　　脚本

　　导出默认值{

　　名称："家"

　　}

　　/脚本

　　风格

　　/风格

cart.vue代码

　　模板

　　氘购物车/h2

　　/模板

　　脚本

　　导出默认值{

　　名称：“家”

　　}

　　/脚本

　　风格

　　/风格

Base.css代码

　　css文件下base.css的内容：

　　正文{

　　填充：0px

　　边距：0px

　　}

img图片资源

　　实现~

总结：

　　项目非常全面，包括槽位、走线、子组件和父组件的值传递、别名设置等各种知识。

　　项目的动态内容：tabbar的文本、图片、颜色可以动态改变，下一个类似的项目可以直接引用这些文件。

主要难点：

　　1.当点击相应的TabBarItem时，改变图片和文字的颜色。这里，使用当前活动路由是否对应于所传递的地址。如果是，它将变为真，并将商品返回到假：

　　计算值：{

　　isActive(){

　　//判断

　　归还这个。$route.path.indexOf(this.path)？假：真

　　},

　　activeStyle(){

　　把这个还回去。isActive？{color:this.activeColor}:{}

　　}

　　},

　　方法：{

　　itemClick(){

　　这个。$router.replace(this.path)

　　}

　　}

　　上面的代码还有其他方法：

　　归还这个。$route.path.indexOf(this.path)！==-1

　　归还这个。$route.path===this.path

　　二、父组件传值问题，父组件传来的对应文件路径和字体颜色被子组件接受和使用：

　　导出默认值{

　　名称： TabBarItem ，

　　道具：{

　　路径：字符串，

　　activeColor:{

　　类型：字符串，

　　默认值：“红色”

　　}

　　},

　　data(){

　　返回{}

　　},

　　完成项目~

　　这就是这篇关于Vue实现TabBar底部导航栏的文章。希望对大家的学习有帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。