版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
1、public里的文件配置
在store文件中的reducers文件中新建week_choice.js文件
代码：
import {handleActions} from "redux-actions";
const defaultState = {
}
export default handleActions({
},defaultState)
在store文件里新建index.js文件
代码：
import {createStore,combineReducers,applyMiddleware} from "redux"
import reduxThunk from "redux-thunk"
import week from "./reducers/week_choice"
// import city from "./reducers/city"
const reducer = combineReducers({
week,
// city
})
const store = createStore(reducer,applyMiddleware(reduxThunk));
export default store;
在store文件里新建week_choice.js文件
代码：
import {handleActions} from "redux-actions";
const defaultState = {
}
export default handleActions({
},defaultState)
在src中的index.js中
代码：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {Provider} from "react-redux"
import store from "@store";
import {HashRouter as Router,Route} from "react-router-dom"
ReactDOM.render(
<Provider store={store}>
<Router>
<Route path="/" component={App}/>
</Router>
</Provider>
, document.getElementById('root'));
在router中新建index.js
代码：
在pages中创建 find home login mine order五个文件夹分别创建index.js
代码：
import React, { Component } from 'react'
export default class Find extends Component {
render() {
return (
<div>
</div>
)
}
}
在common中创建loading文件里创建index.js和index.css文件
index.js
代码：
import React, { Component } from 'react'
import "./index.css";
export default class Loading extends Component {
render() {
return (
<figure>
<div className="dot white"></div>
<div className="dot"></div>
<div className="dot"></div>
<div className="dot"></div>
<div className="dot"></div>
</figure>
)
}
}
index.css代码：
figure {
position: absolute;
margin: auto;
top: 0; bottom: 0; left: 0; right: 0;
width: 6.250em; height: 6.250em;
animation: rotate 2.4s linear infinite;
}
.white {
top: 0; bottom: 0; left: 0; right: 0;
background: white;
animation: flash 2.4s linear infinite;
opacity: 0;
}
.dot {
position: absolute;
margin: auto;
width: 2.4em; height: 2.4em;
border-radius: 100%;
transition: all 1s ease;
}
.dot:nth-child(2) { top: 0; bottom: 0; left: 0; background: #FF4444; animation: dotsY 2.4s linear infinite; }
.dot:nth-child(3) { left: 0; right: 0; top: 0; background: #FFBB33; animation: dotsX 2.4s linear infinite; }
.dot:nth-child(4) { top: 0; bottom: 0; right: 0; background: #99CC00; animation: dotsY 2.4s linear infinite; }
.dot:nth-child(5) { left: 0; right: 0; bottom: 0; background: #33B5E5; animation: dotsX 2.4s linear infinite; }
@keyframes rotate {
0% { transform: rotate( 0 ); }
10% { width: 6.250em; height: 6.250em; }
66% { width: 2.4em; height: 2.4em; }
100%{ transform: rotate(360deg); width: 6.250em; height: 6.250em; }
}
@keyframes dotsY {
66% { opacity: .1; width: 2.4em; }
77%{ opacity: 1; width: 0; }
}
@keyframes dotsX {
66% { opacity: .1; height: 2.4em;}
77%{ opacity: 1; height: 0; }
}
@keyframes flash {
33% { opacity: 0; border-radius: 0%; }
55%{ opacity: .6; border-radius: 100%; }
66%{ opacity: 0; }
}
在pages文件中创建index.js
代码：
import Loadable from 'react-loadable';
import Loading from "@common/loading"
const Home = Loadable({
loader:()=>import("./home"),
loading:Loading
})
const Find = Loadable({
loader:()=>import("./find"),
loading:Loading
})
const Order = Loadable({
loader:()=>import("./order"),
loading:Loading
})
const Mine = Loadable({
loader:()=>import("./mine"),
loading:Loading
})
const Login = Loadable({
loader:()=>import("./login"),
loading:Loading
})
export {
Home,
Find,
Order,
Mine,
Login
}
在router文件中的index.js中引入：
先注意一点
转换图标
router文件中的index.js
import {
Home,
Find,
Order,
Mine,
Login
} from "@pages"
export const tabBarRoute = [
{
path:"/home",
component:Home,
meta:{
flag:true
},
name:"首页",
icon:"\ue628"
},
{
path:"/find",
component:Find,
meta:{
flag:true
},
name:"发现",
icon:"\ue663"
},
{
path:"/order",
component:Order,
meta:{
flag:true
},
name:"订单",
icon:"\ue737"
},
{
path:"/mine",
component:Mine,
meta:{
flag:true,
auth:true
},
name:"我的",
icon:"\ue617"
}
]
export const noTabBarRoute = [
{
path:"/login",
component:Login,
meta:{
flag:false
},
name:"登陆",
}
]
export const routeConfig = tabBarRoute.concat(noTabBarRoute)
在components文件夹中创建tabBar文件夹在tabBar文件里创建index.js 、 styled.js
index.js代码：
扫描二维码关注公众号，回复：
7197033 查看本文章
import React, { Component } from 'react'
import {TabBarWrapper} from "./styled"
import {tabBarRoute} from "@router";
import {NavLink} from "react-router-dom";
export default class TabBar extends Component {
render() {
return (
<TabBarWrapper>
<ul>
<ul>
{
tabBarRoute.map((item,index)=>(
<li key={index}>
<NavLink to={item.path}>
<i className="iconfont">{item.icon}</i>
<span>{item.name}</span>
</NavLink>
</li>
))
}
</ul>
</ul>
</TabBarWrapper>
)
}
}
styled.js代码
import styled from "styled-components";
export const TabBarWrapper = styled.div`
width:100%;
height:1rem;
position:fixed;
left:0;
bottom:0;
border-top:1px solid #ccc;
background:#fff;
ul{
width:100%;
height:100%;
display:flex;
justify-content:space-between;
li{
width:100%;
height:100%;
}
a{
width:100%;
height:100%;
display:flex;
flex-direction: column;
justify-content:center;
align-items:center;
}
i{
font-size:.4rem;
}
span{
font-size:.3rem;
}
.active{
color:#c33;
}
}
`