1、在app.js中使用tabBar（不用引入AtTabBar组件、更新current值 onClick函数）
（1）了解参数
（2）使用
tabBar: {
color:'#808080',
backgroundColor:'#CCDEFF',
selectedColor:'#FFFFFF',
list:[
{
pagePath:'pages/homePage/home_page',
text:'社群',
iconPath:'assets/img/homePageIconUnselected.png',
selectedIconPath:'assets/img/homePageIconSelected.png',
},
{
pagePath:'pages/index/index',
text:'个人',
iconPath:'assets/img/personPageUnselected.png',
selectedIconPath:'assets/img/personPageSelected.png'
}
]
}
2、引入AtTabBar组件
（1）引入组件：import{ AtTabBar }from'taro-ui'
PS:使用带图标标签栏时还需引入以下样式文件（仅按需引用时需要）:
@import"~taro-ui/dist/style/components/icon.scss"
（1）通过onClick事件来更新current值变化
constructor() {
super(...arguments)
this.state = {
current:0
}
}
handleClick (value) {
this.setState({
current: value
})
}
（2）直接使用<AtTabBar>
render () {
return(
<AtTabBar
backgroundColor='#ececec'
color='#ea6bb8'
fixed //固定底部
tabList={[
{title:'待办事项',iconPrefixClass:'fa',iconType:'clock',text:'new'},
{title:'拍照' ,iconType:'camera'},
{title:'通讯录',iconType:'folder',text:'100',max:'99'}
]}
onClick={this.handleClick.bind(this)}
current={this.state.current}
/>
)
}
tabs——标签页
1、引入组件:import{ AtTabs, AtTabsPane }from'taro-ui'
2、与引入AtTabBar组件类似，通过onClick事件来更新current值变化
constructor() {
super(...arguments)
this.state = {
current:0
}
}
handleClick (value) {
this.setState({
current: value
})
}
3、使用
4、参数
