Skip to content

M
mr-julyedu
Commit 378fbb62 by baiguangyao
Options

路由配合ui框架搭建

parent b1531688
Showing with 1126 additions and 171 deletions
.history/src/components/Index/index_20190416212120.js 0 → 100644
import React, { Component } from 'react';
class Index extends React.Component {
render() {
return (
<div>
首页
</div>
)
}
}
export default Index;
\ No newline at end of file
.history/src/components/Index/index_20190416212134.js 0 → 100644
import React from 'react';
class Index extends React.Component {
render() {
return (
<div>
首页
</div>
)
}
}
export default Index;
\ No newline at end of file
.history/src/components/Index/index_20190416212826.js 0 → 100644
import React, { Component } from 'react';
class Index extends Component {
render() {
return (
<div>
首页
</div>
)
}
}
export default Index;
\ No newline at end of file
.history/src/index_20190416212432.js 0 → 100644
import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router';
// import { Provider } from 'react-redux';
import './index.css';
// import App from './App';
ReactDOM.render(
<Router />,
document.getElementById('root'));
\ No newline at end of file
.history/src/index_20190416213941.css 0 → 100644
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
\ No newline at end of file
.history/src/main_20190416211450.js 0 → 100644
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Menu from './menu';
import Index from './components/Index';
import Classify from './components/classify';
import Study from './components/study';
import My from './components/my';
const main = () => (
<div style={{ backgroundColor: 'rgb(245, 245, 249)', textAlign: 'center' }}>
<div>
<Switch>
<Route path='/Index' component={Index}></Route>
<Route path='/Classify' component={Classify}></Route>
<Route path='/Study' component={Study}></Route>
<Route path='/My' component={My}></Route>
</Switch>
</div>
<Menu />
</div>
)
export default main;
\ No newline at end of file
.history/src/main_20190416211501.js 0 → 100644
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Menu from './menu';
import Index from './components/Index';
import Classify from './components/classify';
import Study from './components/study';
import My from './components/my';
const main = () => (
<div style={{ backgroundColor: 'rgb(245, 245, 249)', textAlign: 'center' }}>
<div>
<Switch>
<Route path='/index' component={Index}></Route>
<Route path='/classify' component={Classify}></Route>
<Route path='/study' component={Study}></Route>
<Route path='/my' component={My}></Route>
</Switch>
</div>
<Menu />
</div>
)
export default main;
\ No newline at end of file
.history/src/menu_20190416211612.js 0 → 100644
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) {
console.log(item);
this.setState({ selected: item })
}
render(match) {
let { selected = 'index' } = this.state;
return (
<div className='tabbar'>
<TabBar >
<TabBar.Item
title="首页"
key="home"
icon={<Link to='/index'><i className='iconfont icon-youhuijuan tabbarIcon' ></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' ></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' ></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' ></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;
.history/src/menu_20190416211624.js 0 → 100644
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) {
console.log(item);
this.setState({ selected: item })
}
render(match) {
let { selected = 'index' } = this.state;
return (
<div className='tabbar'>
<TabBar >
<TabBar.Item
title="首页"
key="home"
icon={<Link to='/index'><i className='iconfont icon-youhuijuan tabbarIcon' ></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' ></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' ></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' ></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;
.history/src/menu_20190416211810.js 0 → 100644
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) {
console.log(item);
this.setState({ selected: item })
}
render(match) {
let { selected = 'index' } = this.state;
return (
<div className='tabbar'>
<TabBar >
<TabBar.Item
title="首页"
key="home"
icon={<Link to='/index'><i className='iconfont icon-youhuijuan tabbarIcon' ></i> </Link>}
selectedIcon={<Link to='/index'><i className='iconfont icon-youhuijuan selectedTabbarIcon' ></i> </Link>}
selected={selected === 'home' ? true : false}
onPress={() => { this.onPress('home') }}
/>
<TabBar.Item
title="分类"
key="classify"
icon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></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' ></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' ></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;
.history/src/menu_20190416212838.js 0 → 100644
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) {
console.log(item);
this.setState({ selected: item })
}
render(match) {
let { selected = 'index' } = this.state;
return (
<div className='tabbar'>
<TabBar >
<TabBar.Item
title="首页"
key="home"
icon={<Link to='/index'><i className='iconfont icon-youhuijuan tabbarIcon' ></i> </Link>}
selectedIcon={<Link to='/index'><i className='iconfont icon-youhuijuan selectedTabbarIcon' ></i> </Link>}
selected={selected === 'home' ? true : false}
onPress={() => { this.onPress('index') }}
/>
<TabBar.Item
title="分类"
key="classify"
icon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></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' ></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' ></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;
.history/src/menu_20190416212848.js 0 → 100644
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) {
console.log(item);
this.setState({ selected: item })
}
render(match) {
let { selected = 'index' } = this.state;
return (
<div className='tabbar'>
<TabBar >
<TabBar.Item
title="首页"
key="home"
icon={<Link to='/index'><i className='iconfont icon-youhuijuan tabbarIcon' ></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' ></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' ></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' ></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;
.history/src/menu_20190416212905.js 0 → 100644
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) {
console.log(item);
this.setState({ selected: item })
}
render(match) {
let { selected = 'index' } = this.state;
return (
<div className='tabbar'>
<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' ></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' ></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' ></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;
.history/src/menu_20190416213324.js 0 → 100644
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) {
console.log(item);
this.setState({ selected: item })
}
render(match) {
let { selected = 'index' } = this.state;
return (
<div className='tabbar'>
<TabBar tabBarPosition="top">
<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' ></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' ></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' ></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;
.history/src/menu_20190416213328.js 0 → 100644
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) {
console.log(item);
this.setState({ selected: item })
}
render(match) {
let { selected = 'index' } = this.state;
return (
<div className='tabbar'>
<TabBar tabBarPosition="bottom">
<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' ></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' ></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' ></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;
.history/src/menu_20190416213407.js 0 → 100644
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) {
console.log(item);
this.setState({ selected: item })
}
render(match) {
let { selected = 'index' } = this.state;
return (
<div className='tabbar'>
<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' ></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' ></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' ></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;
.history/src/menu_20190416213825.js 0 → 100644
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) {
console.log(item);
this.setState({ selected: item })
}
render(match) {
let { selected = 'index' } = this.state;
return (
<div className='tabbar' style={{ position: 'fixed' }}>
<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' ></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' ></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' ></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;
.history/src/menu_20190416213927.js 0 → 100644
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) {
console.log(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' ></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' ></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' ></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;
.history/src/menu_20190416214017.js 0 → 100644
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) {
console.log(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;
.history/src/menu_20190416215742.js 0 → 100644
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;
.history/src/menu_20190416220702.js 0 → 100644
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>
<Link to='/index'>
<TabBar.Item
title="首页"
key="home"
icon={<i className='iconfont icon-youhuijuan tabbarIcon' >121212</i>}
selectedIcon={<Link to='/index'><i className='iconfont icon-youhuijuan selectedTabbarIcon' ></i> </Link>}
selected={selected === 'index' ? true : false}
onPress={() => { this.onPress('index') }}
/>
</Link>
<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;
.history/src/menu_20190416220736.js 0 → 100644
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;
.history/src/router_20190416211512.js 0 → 100644
import React from 'react'
import { HashRouter as Router, Route } from "react-router-dom";
import Main from './main'
const router = () => (
<Router>
<Route path='/' component={Main}>
</Route>
</Router>
)
export default router;
\ No newline at end of file
src/App.js deleted 100644 → 0
import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
// import TabBarExample from "./common/Tabbar"
import './index.css'
class App extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'redTab',
hidden: false,
fullScreen: true,
};
}
renderContent(pageText) {
return (
<div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
<div style={{ paddingTop: 60 }}>Clicked “{pageText}” tab， show “{pageText}” information</div>
<a style={{ display: 'block', marginTop: 40, marginBottom: 20, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
hidden: !this.state.hidden,
});
}}
>
Click to show/hide tab-bar
</a>
<a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
onClick={(e) => {
e.preventDefault();
this.setState({
fullScreen: !this.state.fullScreen,
});
}}
>
Click to switch fullscreen
</a>
</div>
);
}
render() {
return (
<div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
<TabBar
unselectedTintColor="#949494"
tintColor="#33A3F4"
barTintColor="white"
hidden={this.state.hidden}
tabBarPosition="top"
>
<TabBar.Item
title="首页"
key="index"
icon={<div style={{
width: '22px',
height: '22px',
background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center / 21px 21px no-repeat'
}}
/>
}
selectedIcon={<div style={{
width: '22px',
height: '22px',
background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center / 21px 21px no-repeat'
}}
/>
}
selected={this.state.selectedTab === 'blueTab'}
onPress={() => {
this.setState({
selectedTab: 'blueTab',
});
}}
data-seed="logId"
>
</TabBar.Item>
<TabBar.Item
icon={
<div style={{
width: '22px',
height: '22px',
background: 'url(https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg) center center / 21px 21px no-repeat'
}}
/>
}
selectedIcon={
<div style={{
width: '22px',
height: '22px',
background: 'url(https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg) center center / 21px 21px no-repeat'
}}
/>
}
title="分类"
key="classify"
selected={this.state.selectedTab === 'redTab'}
onPress={() => {
this.setState({
selectedTab: 'redTab',
});
}}
data-seed="logId1"
>
</TabBar.Item>
<TabBar.Item
icon={
<div style={{
width: '22px',
height: '22px',
background: 'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center / 21px 21px no-repeat'
}}
/>
}
selectedIcon={
<div style={{
width: '22px',
height: '22px',
background: 'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center / 21px 21px no-repeat'
}}
/>
}
title="学习"
key="study"
selected={this.state.selectedTab === 'greenTab'}
onPress={() => {
this.setState({
selectedTab: 'greenTab',
});
}}
>
</TabBar.Item>
<TabBar.Item
icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
title="我的"
key="my"
selected={this.state.selectedTab === 'yellowTab'}
onPress={() => {
this.setState({
selectedTab: 'yellowTab',
});
}}
>
</TabBar.Item>
</TabBar>
</div>
);
}
}
export default App;
src/index.css
...@@ -12,6 +12,3 @@ code { ...@@ -12,6 +12,3 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace; monospace;
} }
.am-tab-bar-bar{
position: fixed !important;
}
\ No newline at end of file
src/index.js
...@@ -8,5 +8,5 @@ import './index.css'; ...@@ -8,5 +8,5 @@ import './index.css';
// import App from './App'; // import App from './App';
ReactDOM.render( ReactDOM.render(
<Router /> <Router />,
, document.getElementById('root')); document.getElementById('root'));
\ No newline at end of file \ No newline at end of file
src/menu.js
...@@ -12,19 +12,18 @@ class menu extends React.Component { ...@@ -12,19 +12,18 @@ class menu extends React.Component {
} }
onPress(item) { onPress(item) {
console.log(item);
this.setState({ selected: item }) this.setState({ selected: item })
} }
render(match) { render(match) {
let { selected = 'index' } = this.state; let { selected = 'index' } = this.state;
return ( return (
<div className='tabbar'> <div className='tabbar' style={{ position: "fixed", width: "100%", bottom: 0 }}>
<TabBar > <TabBar>
<TabBar.Item <TabBar.Item
title="首页" title="首页"
key="home" key="home"
icon={<Link to='/index'><i className='iconfont icon-youhuijuan tabbarIcon' ></i> </Link>} 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>} selectedIcon={<Link to='/index'><i className='iconfont icon-youhuijuan selectedTabbarIcon' ></i> </Link>}
selected={selected === 'index' ? true : false} selected={selected === 'index' ? true : false}
onPress={() => { this.onPress('index') }} onPress={() => { this.onPress('index') }}
...@@ -32,7 +31,7 @@ class menu extends React.Component { ...@@ -32,7 +31,7 @@ class menu extends React.Component {
<TabBar.Item <TabBar.Item
title="分类" title="分类"
key="classify" key="classify"
icon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>} 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>} selectedIcon={<Link to='/classify'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'classify' ? true : false} selected={selected === 'classify' ? true : false}
onPress={() => { this.onPress('classify') }} onPress={() => { this.onPress('classify') }}
...@@ -40,7 +39,7 @@ class menu extends React.Component { ...@@ -40,7 +39,7 @@ class menu extends React.Component {
<TabBar.Item <TabBar.Item
title="学习" title="学习"
key="study" key="study"
icon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing tabbarIcon' ></i></Link>} 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>} selectedIcon={<Link to='/study'><i className='iconfont icon-zhangdan-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'study' ? true : false} selected={selected === 'study' ? true : false}
onPress={() => { this.onPress('study') }} onPress={() => { this.onPress('study') }}
...@@ -48,7 +47,7 @@ class menu extends React.Component { ...@@ -48,7 +47,7 @@ class menu extends React.Component {
<TabBar.Item <TabBar.Item
title="我的" title="我的"
key="my" key="my"
icon={<Link to='/my'><i className='iconfont icon-yonghu-xianxing tabbarIcon' ></i></Link>} 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>} selectedIcon={<Link to='/my'><i className='iconfont icon-yonghu-xianxing selectedTabbarIcon' ></i> </Link>}
selected={selected === 'my' ? true : false} selected={selected === 'my' ? true : false}
onPress={() => { this.onPress('my') }} onPress={() => { this.onPress('my') }}
......
src/router.js
...@@ -6,7 +6,6 @@ import Main from './main' ...@@ -6,7 +6,6 @@ import Main from './main'
const router = () => ( const router = () => (
<Router> <Router>
<Route path='/' component={Main}> <Route path='/' component={Main}>
</Route> </Route>
</Router> </Router>
) )
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment