我们在用小程序的时候大部分都会有一个类似于这样的底部菜单:
这个样例图是显示了三个菜单,但是实际上还可以更多,小程序的底部菜单,是最多不能超过五个。
那么接下来就看看是如何实现的吧。
第一步,寻找合适的图标
在找图标的时候还是费了一番功夫的,毕竟不是一个专业的前端,最后在一篇文章里找到了这个网站(阿里巴巴矢量图标库):
http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
感觉非常good,于是就在上面下载了几个图片,用来做示例图。
同样的一个图片我们要下载两种颜色,这样才能出现点击的不同效果,就像我下载的这样:
第二步,将图片放在自己程序的路径下
大家可以建立一个images目录,然后把图片改好名字放进去,我的文件目录是这样的:
扫描二维码关注公众号,回复:
5255147 查看本文章
第三步,添加代码
小程序的底部菜单在官方文档是一个app.json中的一个全局配置属性,详细的介绍可以看这个官方文档:
https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#全局配置
大家可以直接将下面的代码放到app.json中,注意要在外面还有一个整体的{}
"tabBar": {
"color": "#a9b7b7",
"selectedColor": "#11cd6e",
"borderStyle": "white",
"list": [
{
"selectedIconPath": "images/menuicon/index.png",
"iconPath": "images/menuicon/index1.png",
"pagePath": "pages/index/index",
"text": "首页"
},
{
"selectedIconPath": "images/menuicon/list.png",
"iconPath": "images/menuicon/list1.png",
"pagePath": "pages/list/list",
"text": "列表"
},
{
"selectedIconPath": "images/menuicon/user.png",
"iconPath": "images/menuicon/user1.png",
"pagePath": "pages/user/user",
"text": "个人中心"
}
]
}
下面是一些详细的属性介绍,大家可以自己看看:
往期的基础学习课程,可以查看我的csdn个人博客小程序学习笔记目录下的内容。