用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序开发实战(20):TabBar导航

Rolan 2020-8-11 10:14

在很多App中,首页的下方通常会出现3到5个TabBar按钮,如图1所示。通过这些按钮,可以切换到不同的页面。其实这也属于导航的一种方式。

在很多App中,首页的下方通常会出现35TabBar按钮,如图1所示。通过这些按钮,可以切换到不同的页面。其实这也属于导航的一种方式。

图1  App中TabBar的效果

其实小程序可以用非常简单的方式来实现这个效果,这一切不需要编写一行JavaScript代码。现在准备3个页面,如果是新建的小程序工程,默认会建立两个页面:indexlogs,我们可以再建立一个page页面(新加的页面不要忘了在app.json文件中配置)。包含3个页面的工程结构如图2所示。

图2  工程目录结构

添加TabBar按钮,只需在app.json文件中添加tabBar属性即可,代码如下:

  1. {
  2. … …
  3. "tabBar": {
  4. "color": "#dddddd", // 未选中状态按钮文字的颜色
  5. "selectedColor": "#3cc51f", // 选中状态按钮文字的颜色
  6. "backgroundColor": "#ffffff", // 背景色
  7. "list": [{ // 该数组元素表示TabBar按钮
  8. "pagePath": "pages/index/index", // 当前按钮指向的页面
  9. "iconPath": "../../images/face1.png", // 未被选中时的按钮图像文件路径
  10. "selectedIconPath": "../../images/face.png", // 被选中时的按钮图像文件路径
  11. "text": "页面1"
  12. }, {
  13. "pagePath": "pages/logs/logs", // 当前按钮指向的页面
  14. "iconPath": "../../images/wechat.png",
  15. "selectedIconPath": "../../images/wechatHL.png",
  16. "text": "页面2"
  17. }
  18. , {
  19. "pagePath": "pages/page/page", // 当前按钮指向的页面
  20. "iconPath": "../../images/wechat.png",
  21. "selectedIconPath": "../../images/wechatHL.png",
  22. "text": "页面3"
  23. }
  24. ]
  25. }
  26. }

运行程序后,会显示如图3所示的效果。点击TabBar按钮可切换不同的页面。

图3  带TabBar的小程序

实际上,通过将tabBarposition属性值设为top,会将按钮放到页面上方,不过图像就不会显示了,效果如图4所示。

 

 

图4 在页面顶端显示TabBar的效果

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 蒙娜丽宁 来自: CSDN