微信小程序是底部导航菜单
文章目录
微信小程序是底部导航菜单创作背景1、创建微信小程序后，找到app.json文件。2、引入tabBar3、tabBar list里面填充信息4、创建页面5、准备图标6、将页面信息填入TabBar
结尾
创作背景
底部导航菜单是一个经常使用的功能，有很多的好处
结构清晰（用三到五的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里面。 最后点击编译——效果如下
结尾
恭喜你完成底部导航栏的制作！！！！ 以上则是我所掌握的微信小程序制作底部导航菜单的全部内容，希望能对你有帮助！嘻嘻嘻~~~
文章来源
发表评论