前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序开发实战(20):TabBar导航

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

作者头像
蒙娜丽宁
发布2020-08-11 11:05:23
8960
发布2020-08-11 11:05:23
举报
文章被收录于专栏:极客起源

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

图1 App中TabBar的效果

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

图2 工程目录结构

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

代码语言:javascript
复制
{
   … …
   "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的效果

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-08-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 极客起源 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档