menu_20190416215742.js 2.67 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
import React from 'react'

import { TabBar } from 'antd-mobile'
import { Link } from 'react-router-dom';

class menu extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};
        this.onPress = this.onPress.bind(this);
    }

    onPress(item) {
        this.setState({ selected: item })
    }

    render(match) {
        let { selected = 'index' } = this.state;
        return (
            <div className='tabbar' style={{ position: "fixed", width: "100%", bottom: 0 }}>
                <TabBar>
                    <TabBar.Item
                        title="首页"
                        key="home"
                        icon={<Link to='/index'><i className='iconfont icon-youhuijuan tabbarIcon' >121212</i> </Link>}
                        selectedIcon={<Link to='/index'><i className='iconfont icon-youhuijuan selectedTabbarIcon' ></i> </Link>}
                        selected={selected === 'index' ? true : false}
                        onPress={() => { this.onPress('index') }}
                    />
                    <TabBar.Item
                        title="分类"
                        key="classify"
                        icon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' >121212</i></Link>}
                        selectedIcon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
                        selected={selected === 'classify' ? true : false}
                        onPress={() => { this.onPress('classify') }}
                    />
                    <TabBar.Item
                        title="学习"
                        key="study"
                        icon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' >121212</i></Link>}
                        selectedIcon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
                        selected={selected === 'study' ? true : false}
                        onPress={() => { this.onPress('study') }}
                    />
                    <TabBar.Item
                        title="我的"
                        key="my"
                        icon={<Link to='/my'><i className='iconfont icon-yonghu-xianxing tabbarIcon' >121212</i></Link>}
                        selectedIcon={<Link to='/my'><i className='iconfont icon-yonghu-xianxing selectedTabbarIcon' ></i> </Link>}
                        selected={selected === 'my' ? true : false}
                        onPress={() => { this.onPress('my') }}
                    />
                </TabBar>
            </div>

        )
    }

}


export default menu;