微信小程序底部导航栏

关于底部导航栏,是非常常见和使用的一个功能,刚学习,通过查阅资料,最终解决问题。在此记录下,方便查看。

首先需要把要跳转的页面写好,在此就不细说了。

其次在配置文件app.json里面写好需要展示的页面,把默认的页面放在第一个。如图

微信小程序底部导航栏

最后关键的代码,如图

微信小程序底部导航栏

注:

     color:底部导航栏文字的默认颜色

     selectedColor:选择后底部导航栏文字的颜色

     selectedIconPath:选择后展示的图标

     iconPath:默认展示的图标

     pagePath:要访问的页面地址

     text:底部导航栏文字内容

最终的效果图:

微信小程序底部导航栏