当前位置:   article > 正文

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

微信小程序 底部菜单

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

创作背景

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

  • 结构清晰(用三到五的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里面。
在这里插入图片描述
最后点击编译——效果如下

请添加图片描述

结尾

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/111744
推荐阅读
相关标签
  

闽ICP备14008679号