微信小程序实现底部菜单栏

阿里云拼团返场活动: 点击加入

底部菜单栏是一种在手机app上很常用的设计,如微信:

image.png

也许是微信小程序考虑到这种设计很常用,在微信小程序中只需要简单的配置就能达到这种效果:在app.json中配置tabBar属性。具体步骤如下:

  1. 准备好几个页面:在app.json中配置pages属性,微信开发工具会自动创建对应的文件。

   image.png


   2.分别为每个页面设置一些内容作为区别,如me页面。

image.png

image.png


3.准备几张图片作为tab项的图标。可以在项目的根目录中创建一个目录来存放图片。

4.准备工作完成。关键在于配置tabBar属性:

image.png

如上图配置了tabBar的3个属性。backgroundColor是整个tabBar的背景颜色,selectedColor是当前选中项的文字颜色。list是tab项的列表,每一个tab项是一个对象,包含了4个属性:pagePath是tab项对应页面的路径,就是第1步中准备好的路径。text是tab项的文字。iconPath是tab项的图标,selectedIconPath是tab项选中状态时的图标。


通过以上配置后的显示效果如下图:

image.png

虽然有点丑,但是很直观。

腾讯云活动继续: 看一看(竞争好激烈^_^)

演示站
上一篇:微信小程序全局配置文件app.json
下一篇:微信小程序如何设置底部菜单项的数字标识?

发表评论