微信小程序tab标签开发教程

　　关于微信小程序tab，其实包含很开发的很多方面，今天小编会一一为大家揭晓，接下来要介绍的是微信小程序tab标签的开发教程，请大家仔细阅读。

　　微信小程序主页面大部分都定义了小程序底部导航栏,定义一个标签栏只需要在app.json里做声明即可,代码如下:

　　"tabBar": {

　　"color": "black",

　　"selectedColor": "red",

　　"borderStyle": "black",

　　"backgroundColor": "gray",

　　"position": "bottom",

　　"list": [

　　{

　　"text": "首页",

　　"pagePath": "pages/index/index",

　　"iconPath": "image/wechat.png",

　　"selectedIconPath": "image/wechatHL.png"

　　},

　　{

　　"text": "我的",

　　"pagePath": "pages/mine/mine",

　　"iconPath": "image/wechat.png",

　　"selectedIconPath": "image/wechatHL.png"

　　}

　　]

　　}

　　上面这段代码position设置为bottom，即为默认属*，展示在页面的底部

　　若把position设置为top，状态栏即展示在小程序页面顶部，位于toolbar之下

　　更多可参照官方文档

　　tabBar

　　如果我们的小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面)，那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

　　Tip： 通过小程序点击跳转(wx.navigateTo)或者页面重定向(wx.redirectTo)所到达的页面，即使它是定义在 tabBar 配置中的页面，也不会显示底部的 tab 栏。

　　tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

　　属*说明：

　　属*类型必填默认值描述

　　colorHexColor是 tab 上的文字默认颜色

　　selectedColorHexColor是 tab 上的文字选中时的颜色

　　backgroundColorHexColor是 tab 的背景色

　　borderStyleString否blacktabbar上边框的颜色， 仅支持 black/white

　　listArray是 tab 的列表，详见 list 属*说明，最少2个、最多5个 tab

　　positionString否bottom可选值 bottom、top

　　其中 list 接受一个数组，数组中的每个项都是一个对象，其属*值如下：

　　属*类型必填说明

　　pagePathString是页面路径，必须在 pages 中先定义

　　textString是tab 上按钮文字

　　iconPathString是图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px

　　selectedIconPathString是选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px

　　关于微信小程序tab标签，相信大家都有了初步的了解，接下来就是参照上述小程序代码进行实际的开发了，想要获取更多相关资料请关注微信小程序素材网。

　　怎样实现微信小程序tab切换

　　微信小程序tab选项卡不显示怎么办

　　怎样实现微信小程序顶部tab切换