微信小程序(一)：微信小程序实现底部导航菜单

微信小程序是底部导航菜单

创作背景

底部导航菜单是一个经常使用的功能，有很多的好处

• 结构清晰（用三到五的tab，避免在底部导航条的内容）
• 明确（条形元素应易于扫描，目标应该足够大，便于点击）
• 简洁（每个导航图标都指向正确的目的地，并在应用程序中始终如一地使用所有元素）

今天就做一个简单的底部导航菜单栏来给各位大哥看看ing

1、创建微信小程序后，找到app.json文件。

2、引入tabBar

在app.json的下面输入tabBar,会直接提示 tabBar,直接回车就行，记得先打逗号分隔开哦（新手小白特别要注意！！！）如下图

生成后的样子

在list里面有四个参数，来简单说明以下
pagePath:指向导航栏要显示的页面
text:导航栏的名称（eg:首页）
iconPath：导航栏的图标
selectedIconPath：导航栏选中后的图标

3、tabBar list里面填充信息

复制以上四个参数，在list里面进行添加，添加四个（我的是四个）。

4、创建页面

还是在pages里面找到pages,在pages里里面添加如下：

里面的名称自己定义哦！以上是我的页面。

5、准备图标

在项目目录里面创建static文件夹用于存放静态资源，在static下面创建TabBar文件夹，将你准备的icon图标放进去。
如下图所示：

恭喜你！！！现在所有的准备工作都已经做好了
现在进行最后一步

6、将页面信息填入TabBar

将你的页面信息准确无误地填入list里面。

最后点击编译——效果如下

结尾

恭喜你完成底部导航栏的制作！！！！
以上则是我所掌握的微信小程序制作底部导航菜单的全部内容，希望能对你有帮助！嘻嘻嘻~~~