使用图鸟UI实现APP底部导航

前言

学无止境，无止境学。坚持每天学点编程知识，坚持每天写点小文章，坚持每天进步一点点。大家好，我是张大鹏，喜欢学习和分享，希望能够通过此公众号，将自己学到的东西分享给大家，和大家一起交流，一起成长，一起进步。

乾坤未定，你我皆是黑马。大鹏一日同风起，扶摇直上九万里。宝剑锋从磨砺出，梅花香自苦寒来。不积跬步，无以至千里，不积小流无以成江海。

如果有多余的时间，就坚持学习吧，小时候学习改变命运，长大了学习丰富内涵，老了学习带来宁静。活到老，学到老，我能行！

概述

本文要给大家介绍的是APP中最常见的部分的开发，那就是底部导航区域，如图：

在真实的开发中，中间这个凸起的部分是比较难搞的。不过我们今天借助图鸟UI，不仅能够轻松实现这种导航样式，还能够实现真实的点击不同的导航跳转到不同页面的效果。

具体怎么实现呢？一起来看看吧~

效果预览

引入图鸟UI库

参考我之前的文章《Uniapp项目中引入图鸟UI库》，根据文章的教程，我们就能够引入图鸟UI库，使用图鸟UI的相关组件和样式了。

这其中，就包含我们本篇文章要讲到的底部导航样式。

创建页面

目录

如图：

分别创建如下页面，不需要在pages.json中注册：

首页：home.vue

分类页：category.vue

热门页：hot.vue

推荐页：recommend.vue

我的页：me.vue

首页

首页

分类页

分类

热门页

热门

推荐

我的页

个人中心

实现底部导航（核心）

导航项详解

参考文档：https://docs.ahuaaa.cn/components/tabbar.html

从参考文档中，我们能够得到，一个导航item的具体内容如下：

let list = [

{

// 激活时的图标/图片，使用TuniaoUI内置的图标

activeIcon: "count-fill",

// 未激活时的图标/图片，使用TuniaoUI内置的图标

inactiveIcon: "count",

// 显示的提示文字

title: '首页',

// 角标显示的数字，如果需要移除角标，不配置此参数或者配置此参数为0即可

count: 2,

// 如果配置此值为true，那么角标将会以红点的形式显示

dot: true,

// 当前显示为图标时，激活状态下的图标颜色，在这里配置的参数优先级比全局高

activeIconColor: 'tn-cool-bg-color-1',

// 当前显示为图标时，未激活状态下的图标颜色，在这里配置的参数优先级比全局高

inactiveIconColor: '#AAAAAA',

// 激活状态下的字体颜色，在这里配置的参数优先级比全局高

activeColor: '#080808',

// 未激活状态下的字体颜色，在这里配置的参数优先级比全局高

inactiveColor: '#AAAAAA',

// 图标大小

iconSize: 40,

// 是否显示未突起图标

out: false

}

]

导航基本样式

我们在index.vue中实现基本的底部导航样式：

export default {

data() {

return {

// 底部tabbar菜单数据

tabbarList: [{

title: '元素',

activeIcon: 'count-fill',

inactiveIcon: 'menu'

},

{

title: '组件',

activeIcon: 'discover-fill',

inactiveIcon: 'discover'

},

{

title: '页面',

activeIcon: 'honor',

inactiveIcon: 'honor',

activeIconColor: '#FFFFFF',

inactiveIconColor: '#FFFFFF',

iconSize: 50,

out: true

},

{

title: '工具',

activeIcon: 'computer-fill',

inactiveIcon: 'computer'

},

{

title: '图鸟',

activeIcon: 'vip-fill',

inactiveIcon: 'vip'

}

],

// tabbar当前被选中的序号

currentIndex: 0

}

}

}

页面跳转

我们现在虽然有了底部导航样式，但是点击的时候无法跳转。如果我们要实现点击导航跳转到对应页面，这里我们需要引入之前的页面。

引入之前创建好的页面并注册：

import Home from './home.vue';

import Category from './category.vue';

import Hot from './hot.vue';

import Recommend from './recommend.vue';

import Me from './me.vue';

export default {

components: {

Home,

Category,

Hot,

Recommend,

Me

},

...

}

在视图中使用，通过v-show控制显示哪个页面。这里也可以通过v-if来控制，不过v-if每次会销毁元素，这样会导致页面元素重复创建，可能会影响性能。v-show这是控制页面的显示和隐藏，理论上会比v-if的性能更好，不过这样的话占用的内存也会更高。具体如何使用，大家可以根据自己的实际需求灵活选择。

页面{{ currentIndex }}

页面{{ currentIndex }}

页面{{ currentIndex }}

页面{{ currentIndex }}

页面{{ currentIndex }}

通过以上代码，我们就能够实现点击导航跳转到不同的页面了。

总结