微信小程序ColorUI使用自定义tabbar

原本直接使用demo里的tabbar，发现渲染出来的页面都是component形式的，无法使用Page里的一些事件方法，所以打算使用自定义tabbar改写，这其中又出现了一些问题，和大家分享一下。

自定义tabbar

这部分根据官方文档，把tabbar的内容拷过来就可以了。
官方链接: 自定义 tabBar.

样式丢失

随后发现样式丢失，在index.wxss文件中重新引用样式表。

@import "../colorui/main.wxss";
@import "../colorui/icon.wxss";

这时候发现大部分样式已经好了，其中还有一些不起作用，比如颜色之类的，再根据自己的需要手动添加，如：

.bg-white {
    background-color: #ffffff;
    color: #666666;
}
.text-green,
.line-green,
.lines-green {
    color: #39b54a;
}

切换出错

样式调好了之后，点击切换，发现字体颜色乱跳，查了相关文档发现每个 tab 页下的自定义 tabBar 组件实例是不同的。

这就意味着我单纯的通过在tabbar里js中一个selected变量是判断不出在哪个页面的，只能在进入某个页面时对其进行修改。
tabbar的wxml文件

参照了网上的资料，实现如下：

1. tabbar的js文件中selected初始设为null

  data: {
    selected: null
  }

2. 在每个tabbar页面的onshow方法中初始化selected的值，第一个页面就设置为0、第二个页面就设置为1其他同理。

  onShow:function(){
     this.getTabBar().setData({
       selected: 0
     })
  }