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共同动态加载顶部导航栏。