Taro开发微信小程序-TabBar实现(四)

TabBar有四个子页：Fitting(试衣间)、Wardrobe(衣橱)、Circle(圈子)、Mine(我的)。
这四个页面存放在src/components/下为四个组件。
在src/pages/main/index.js编写主页。
代码如下：

import Taro, { Component } from '@tarojs/taro' import { AtTabBar } from 'taro-ui' import { View } from '@tarojs/components' import Fitting from './../../components/fitting'; import Wardrobe from './../../components/wardrobe'; import Circle from './../../components/circle'; import Mine from './../../components/mine'; import './index.less';  const tabList = [         { title: '试衣间', iconType: 'eye' },         { title: '衣橱', iconType: 'equalizer' },         { title: '圈子', iconType: 'map-pin', },         { title: '我的', iconType: 'user', } ]  export default class Main extends Component{      constructor(props){         super(props);         this.state={             current: 0         }         this.handleClick = this.handleClick.bind(this);     }     componentDidMount(){         Taro.setNavigationBarTitle({             title: tabList[this.state.current].title         })     }     componentDidUpdate(){         Taro.setNavigationBarTitle({             title: tabList[this.state.current].title         })     }      handleClick(value){         this.setState({             current: value         })     }      render(){         return(             <View>                 {this.state.current===0 && <Fitting />}                 {this.state.current===1 && <Wardrobe />}                 {this.state.current===2 && <Circle />}                 {this.state.current===3 && <Mine />}                 <View className='tabbar'>                     <AtTabBar                       fixed                       tabList={tabList}                       onClick={this.handleClick}                       current={this.state.current}                     />                 </View>             </View>         )     } } 

Taro还不支持在render()函数之外用JSX语法，所以我使用了：

{this.state.current===0 && <Fitting />} {this.state.current===1 && <Wardrobe />} {this.state.current===2 && <Circle />} {this.state.current===3 && <Mine />} 

还有一个需要注意的点：
Taro中的componentDidMount方法里没有调用setState()，所以页面不会重新渲染，顶部导航栏也就不会发生变化，我使用componentDidMount和componentDidUpdate共同动态加载顶部导航栏。

Taro开发微信小程序 配置环境(一)
Taro开发微信小程序-登录实现(二)
Taro开发微信小程序-用户授权(三)

文章来源: https://blog.csdn.net/SherrybabyOne/article/details/90272122