小程序tabbar实现底部tab导航栏

一节带领大家实现了网络数据的获取并填充到首页列表，但是我们的小程序肯定不能仅仅只有首页一个页面，我们这节就来学习使用tabbar实现底部导航栏，进而实现个人中心页。同样我们这节的代码是基于第三天代码开发的。如果没有看过前3天视频的同学，点击上面链接去看前3天视频。

本节知识点

• 1，认识tabbar

• 2，实现底部导航栏

先看下本节实现的效果图

tabbar导航栏.gif

接下来开始讲解实现步骤

一，创建个人中心页

大家还记得怎么创建新页面吧。

• 1，在pages里创建me文件夹

• 2，在新创建的me文件夹里创建me.wxml,me.js,me.wxss文件

• 3，在app.json里注册个人中心页面。
  下面贴出来图解

  
  

  

  1-创建me.png

注册页面.png

二，学习tabbar，并用tabbar实现底部导航栏

老规矩，我们学习新组件，一定要先看官方文档，官方文档永远是最好的老师

官方文档链接：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

官方文档

可以看到，我们要想用tabbar实现底部导航栏，就至少要有两个页面，这也是一开始我们创建me（个人中心页面的原因）

我们的tabbar使用官方也有给出简单示例

官方示例

我们就把官方示例代码复制到我们的app.json(tabbar也是在app.json里注册使用的)

image.png

这样我们就把tabbar注册到app.json里了。
这样我们就实现了下面效果

作者：java小石头
链接：https://www.jianshu.com/p/4acaf968aabf