微信小程序选项卡

在android中之前很流行的主界面布局就是下面几个bottom，然后点击进行切换,这个效果在小程序中实现起来更是简单的不行

官网文档中有一个全局配置,然后找到复制就行

"tabBar": {
  "backgroundColor": "#eee",
  "selectedColor":"#ff0000",
  "borderStyle":"white",
  "list": [
    {
      "pagePath": "page/posts/posts",
      "text": "文学"
    },
    {
      "pagePath": "page/movie/movie",
      "text": "电影"
    } 
  ]
}

我这是二个  最多是5个 最少肯定是2个了,

pagePath:是你点击后跳转的路径

tabBar

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

属性	类型	必填	默认值	描述
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar上边框的颜色， 仅支持 black / white
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position	String	否	bottom	tabBar的位置，仅支持 bottom / top

其中 list 接受一个数组，只能配置最少2个、最多5个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮文字
iconPath	String	否	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 postion 为 top 时，不显示 icon。
selectedIconPath	String	否	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 postion 为 top 时，不显示 icon

 

这是来自官网的属性字段说明

 

如果你跳转的url是指定tabBar中的某一个pagePath，那么肯定是跳转不了,我就犯了那个错误,在首页跳转到我某个tarBar中的某一个path下导致跳转不成功,我一直在反思这个问题.后来才发现是这个问题