回复 刷新

暂无评论

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

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

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

图2 工程目录结构

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

{
   … …
   "tabBar": {
    "color": "#dddddd",                            //  未选中状态按钮文字的颜色
    "selectedColor": "#3cc51f",                   //  选中状态按钮文字的颜色
    "backgroundColor": "#ffffff",                 //  背景色
    "list": [{                                       //  该数组元素表示TabBar按钮
      "pagePath": "pages/index/index",              //  当前按钮指向的页面
      "iconPath": "../../images/face1.png",       //  未被选中时的按钮图像文件路径
      "selectedIconPath": "../../images/face.png", //  被选中时的按钮图像文件路径
      "text": "页面1"
    }, {  
      "pagePath": "pages/logs/logs",                //  当前按钮指向的页面
      "iconPath": "../../images/wechat.png",
      "selectedIconPath": "../../images/wechatHL.png",
      "text": "页面2"
    }
    , {  
      "pagePath": "pages/page/page",                //  当前按钮指向的页面
      "iconPath": "../../images/wechat.png",
      "selectedIconPath": "../../images/wechatHL.png",
      "text": "页面3"
    }
    ]
  }
}

运行程序后,会显示如图 3 所示的效果。点击 TabBar 按钮可切换不同的页面。
在这里插入图片描述

图3 带TabBar的小程序

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

在这里插入图片描述

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

  • 72
  • 0
  • 0