【文档】wap2app选项卡样式定制

以下修改或配置，均在 client_index.html 中进行。

选项卡文字颜色

/*选项卡文字默认颜色*/  
.tab-item {  
  color: #000000;  
}  

/*选项卡文字高亮时颜色*/  
.tab-item.active {  
  color: #FFFF00;  
}

选项卡背景

.tab-inner {  
  background-color: #0000FF;  
  box-shadow: 0 0 1px #FF0000;  
  -webkit-box-shadow: 0 0 1px #FF0000;  
}

底部选项卡是没有边框（border）的，而是使用了阴影（box-shadow）。可以根据需求，修改样式。

修改阴影的颜色

.tab-inner {  
  box-shadow: 0 0 1px #FF0000;  
  -webkit-box-shadow: 0 0 1px #FF0000;  
}

不要阴影，使用边框。

.tab-inner {  
  box-shadow: none;  
  -webkit-box-shadow: none;  
  border-top: 1px solid #0000ff;  
}

关于图标

图标是需要在初始化选项卡的时候就配置的，详细参考 http://ask.dcloud.net.cn/article/12878 中的说明。

new TabBar({  
  list: [{  
      url: "http://hello.wap2app.dcloud.io",  
      text: "首页", //本地路径，也可以是网络路径  
      iconPath: 'http://hello.wap2app.dcloud.io/img/home-outline.png',  
      selectedIconPath: 'http://hello.wap2app.dcloud.io/img/home-outline-highlight.png'  
    },  
    {  
      url: "http://hello.wap2app.dcloud.io/about.html",  
      text: "关于",  
      iconPath: 'http://hello.wap2app.dcloud.io/img/gear-outline.png',  
      selectedIconPath: 'http://hello.wap2app.dcloud.io/img/gear-outline-highlight.png'  
    }  
  ]  
});