微信小程序如何实现tabBar-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

微信小程序如何实现tabBar

这篇文章主要介绍了微信小程序如何实现tabBar,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

创新互联建站主营雁峰网站建设的网络公司,主营网站建设方案,成都app软件开发公司,雁峰h5小程序定制开发搭建,雁峰网站营销推广欢迎雁峰等地区企业咨询

具体如下:

1、效果展示

微信小程序如何实现tabBar

2、原理:在app.json中配置tabBar属性

{
 "pages": [
  "index",
  "picDisplay"
 ],
 "window": {
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "首页",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light",
  "enablePullDownRefresh": false
 },
 "tabBar": {
  "color":"#666666",
  "selectedColor":"#06bd04",
  "list": [{
   "pagePath": "index",
   "text": "首页",
   "iconPath": "images/index.png",
   "selectedIconPath": "images/indexHL.png"
  },{
   "pagePath": "picDisplay",
   "text": "图片展示",
   "iconPath": "images/picDisplay.png",
   "selectedIconPath": "images/picDisplayHL.png"
  }]
 }
}

3、关键代码

"tabBar": {
  "color":"#666666",
  "selectedColor":"#06bd04",
  "list": [{
   "pagePath": "index",
   "text": "首页",
   "iconPath": "images/index.png",
   "selectedIconPath": "images/indexHL.png"
  },{
   "pagePath": "picDisplay",
   "text": "图片展示",
   "iconPath": "images/picDisplay.png",
   "selectedIconPath": "images/picDisplayHL.png"
  }]
 }

4、操作方法

新建一个项目,打开app.json文件,将关键代码复制到"window":{},后面,注意window的大括号前加逗号,如下图

微信小程序如何实现tabBar

配置tabBar属性值

"tabBar": {
  //设置tabBar文字默认颜色
  "color":"#666666",
  //设置tabBar文字被选中是的颜色
  "selectedColor":"#06bd04",
  //tab列表,数组类型,改数组内至少要有两个但不大于5个的tab对象
  "list": [{
   //设置tab跳转页面链接
   "pagePath": "index",
   //设置tab上的文字
   "text": "首页",
   //设置tab上的默认图标
   "iconPath": "images/index.png",
   //设置tab被选中时的图标
   "selectedIconPath": "images/indexHL.png"
  },{
   "pagePath": "picDisplay",
   "text": "图片展示",
   "iconPath": "images/picDisplay.png",
   "selectedIconPath": "images/picDisplayHL.png"
  }]
 }

tabBar的5种常用属性与配置说明:

1) color:未选择字体颜色

2) selectedColor:选择字体颜色

3) borderStyle:tabbar上方线的颜色white(仅支持白色和黑色)

4) backgroundColor:tabbar背景颜色

5) list:设置rab列表项(最少2个,最多5个tab)。

另外,list作为数组属性,其每一项又是一个对象,list可以设置4种属性:

① text:设置tab上的文字

② iconPath:设置tab处于未激活状态时显示的图片路径。

③ selectedIconPath:设置tab处于激活状态时的图片路径(iconPath与selectedIconPath图片大小限制都是40KB)

④ pagePath:设置触按tab时的跳转页面路径(该页面必须在pages中进行了配置)

感谢你能够认真阅读完这篇文章,希望小编分享的“微信小程序如何实现tabBar”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


当前名称:微信小程序如何实现tabBar
网站路径:http://kswsj.cn/article/ihpcde.html

其他资讯