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

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

文章目录

  • 微信小程序是底部导航菜单
    • 创作背景
    • 1、创建微信小程序后,找到app.json文件。
    • 2、引入tabBar
    • 3、tabBar list里面填充信息
    • 4、创建页面
    • 5、准备图标
    • 6、将页面信息填入TabBar
  • 结尾

创作背景

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

  • 结构清晰(用三到五的tab,避免在底部导航条的内容)
  • 明确(条形元素应易于扫描,目标应该足够大,便于点击)
  • 简洁(每个导航图标都指向正确的目的地,并在应用程序中始终如一地使用所有元素)

今天就做一个简单的底部导航菜单栏来给各位大哥看看ing

1、创建微信小程序后,找到app.json文件。

微信小程序(一):微信小程序实现底部导航菜单_第1张图片

2、引入tabBar

在app.json的下面输入tabBar,会直接提示 tabBar,直接回车就行,记得先打逗号分隔开哦(新手小白特别要注意!!!)如下图
微信小程序(一):微信小程序实现底部导航菜单_第2张图片
生成后的样子
微信小程序(一):微信小程序实现底部导航菜单_第3张图片
在list里面有四个参数,来简单说明以下
pagePath:指向导航栏要显示的页面
text:导航栏的名称(eg:首页)
iconPath:导航栏的图标
selectedIconPath:导航栏选中后的图标

3、tabBar list里面填充信息

复制以上四个参数,在list里面进行添加,添加四个(我的是四个)。
微信小程序(一):微信小程序实现底部导航菜单_第4张图片

4、创建页面

还是在pages里面找到pages,在pages里里面添加如下:
微信小程序(一):微信小程序实现底部导航菜单_第5张图片
里面的名称自己定义哦!以上是我的页面。

5、准备图标

在项目目录里面创建static文件夹用于存放静态资源,在static下面创建TabBar文件夹,将你准备的icon图标放进去。
如下图所示:
微信小程序(一):微信小程序实现底部导航菜单_第6张图片
恭喜你!!!现在所有的准备工作都已经做好了
现在进行最后一步

6、将页面信息填入TabBar

将你的页面信息准确无误地填入list里面。
微信小程序(一):微信小程序实现底部导航菜单_第7张图片
最后点击编译——效果如下

微信小程序(一):微信小程序实现底部导航菜单_第8张图片

结尾

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

你可能感兴趣的:(微信小程序,微信小程序,小程序)