React實戰項目--02電商系統底部導航、router

1、項目結構css

這是我參與8月更文挑戰的第3天，活動詳情查看：8月更文挑戰。 html

1. 在public全局的css中初始化樣式，並把背景設置成灰色 ，作好移動端的rem適配
*{margin:0px;padding:0px;}
ul,li{list-style-type:none;}
input{outline: none;border-radius: 0px;border:0 none;}
html,body {
    font-size: 20px!important;
    min-height: 100%;
    overflow-x:hidden;
    background-color: #f5f5f9;
   -webkit-tap-highlight-color:rgba(0,0,0,0); /*禁止連接高亮*/     
   -webkit-touch-callout:none;    /*禁止連接長按彈出選項*/
}
@media screen and (min-width: 400px) {
    html,body {
        font-size: 21.3px!important;
    }
}
@media screen and (min-width: 414px) {
    html,body {
        font-size: 22.08px!important;
    }
}
@media screen and (min-width: 480px) {
    html,body {
        font-size: 25.6px!important;
    }
}
@media screen and (min-width: 768px) {
    html,body {
        font-size: 40.96px!important;
    }
}
2. 在home.css中寫一個50px的底部導航欄
.footer-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 2.5rem;
    background-color: #fff;
}
home/index.js
import React from 'react';
import Css from '../../../assets/css/home/home/index.css';
export default class IndexComponent extends React.Component{
    componentDidMount(){

    }
    render(){
        return(
            <div class="app"> 首頁 <div className={Css['footer-nav']}></div> </div>
        );
    }
}
複製代碼

底部導航欄的基本樣式就行了vue

2、使用flex佈局完成導航欄靜態react

home/index.js
import React from 'react';
import Css from '../../../assets/css/home/home/index.css';
export default class IndexComponent extends React.Component{
    componentDidMount(){

    }
    render(){
        return(
            <div class="app"> 首頁 {/*底部導航欄*/} <div className={Css['footer-nav']}> <div className={Css['footer-nav-item']}> <div className={Css['footer-nav-item-icon'] + ' ' + Css['home'] + ' ' + Css['active']}></div> <div className={Css['footer-nav-item-title'] + ' ' + Css['active']}>首頁</div> </div> <div className={Css['footer-nav-item']}> <div className={Css['footer-nav-item-icon'] + ' ' + Css['cart']}></div> <div className={Css['footer-nav-item-title']}>購物車</div> </div> <div className={Css['footer-nav-item']}> <div className={Css['footer-nav-item-icon'] + ' ' + Css['my']}></div> <div className={Css['footer-nav-item-title']}>個人</div> </div> </div> </div>
        );
    }
}
home/index.css
.footer-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 2.5rem;
    background-color: #fff;
    z-index: 10;
    box-shadow: 0 0 10px rgba(239,239,239,1);
}
.footer-nav .footer-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.footer-nav .footer-nav-item .footer-nav-item-icon {
    width: 1.4rem;
    height: 1.4rem;
}

.footer-nav .footer-nav-item .footer-nav-item-title {
    font-size: 0.6rem;
}

.footer-nav .footer-nav-item .footer-nav-item-title.active {
    color: #eb1625;
}

.footer-nav .footer-nav-item .footer-nav-item-icon.home {
    background: url("../../../images/common/home1.png");
    background-size: 100% 100%;
}

.footer-nav .footer-nav-item .footer-nav-item-icon.home.active {
    background: url("../../../images/common/home2.png");
    background-size: 100% 100%;
}

.footer-nav .footer-nav-item .footer-nav-item-icon.cart {
    background: url("../../../images/common/cart1.png");
    background-size: 100% 100%;
}

.footer-nav .footer-nav-item .footer-nav-item-icon.cart.active {
    background: url("../../../images/common/cart2.png");
    background-size: 100% 100%;
}

.footer-nav .footer-nav-item .footer-nav-item-icon.my {
    background: url("../../../images/common/my1.png");
    background-size: 100% 100%;
}

.footer-nav .footer-nav-item .footer-nav-item-icon.my.active {
    background: url("../../../images/common/my2.png");
    background-size: 100% 100%;
}
複製代碼

靜態效果已完成git

2、配置主頁的子路由github

在router.js中

return(
    <React.Fragment> <Router> <React.Fragment> <Switch> <Route path="/home" component={HomeComponent} ></Route> </Switch> </React.Fragment> </Router> </React.Fragment>
)

在home/index.js中

import asyncComponents from '../../../components/async/AsyncComponent';
const IndexComponent=asyncComponents(()=>import('../index/index'));
<React.Fragment> <Switch> <Route path={'/home/index'} component={IndexComponent}></Route> </Switch> </React.Fragment>

// 在子路由index/index.js中
import React from 'react';
import Css from '../../../assets/css/home/index/index.css';
export default class IndexComponent extends React.Component{
    componentDidMount(){
        console.log($(".app").html());
    }
    render(){
        return(
            <div> 首頁 </div>
        );
    }
}
複製代碼

第一個子路由配置完成web

3、路由重定向markdown

<Route  path="/home" component={HomeComponent} ></Route>
<Redirect to={'/home/index'}></Redirect>
複製代碼

當輸入/的路由時，會自動重定向到/home/indexreact-router

接下來作一個路由的配置，區分devUrl和proURL, 根目錄的可配置，方便後期項目的部署app

js/conf/config.js
let prodUrl="http://vueshop.glbuys.com";
let devUrl="http://vueshop.glbuys.com";
let baseUrl=process.env.NODE_ENV==='development'?devUrl:prodUrl;
export default {
    baseUrl:baseUrl,
    path:"/",
    token:"1ec949a15fb709370f"
}
複製代碼

以後來改造咱們以前的路由的根路徑， config中的path

<Route  path={config.path + 'home'}  component={HomeComponent} ></Route>
<Redirect to={config.path + 'home/index'}></Redirect>
複製代碼

4、路由點擊事件 + 刷新默認選擇tab

import React from 'react';
import Css from '../../../assets/css/home/home/index.css';
import {Route, Switch} from "react-router-dom";
import asyncComponents from '../../../components/async/AsyncComponent';
import config from "../../../assets/js/conf/config";
const IndexComponent=asyncComponents(()=>import('../index/index'));
const CartComponent=asyncComponents(()=>import('../cart/index'));
const UserComponent=asyncComponents(()=>import('../../user/index/index'));
export default class HomeComponent extends React.Component{
    componentWillMount() {
        this.refreshDefaultTab()
    }

    componentDidMount(){

    }
    constructor(props) {
        super(props);
        this.state = {
            tabIndex: 0
        }
    }
    // 切換tab
    goPage(url) {
        console.log(url,'7777')
        this.props.history.replace(url)
        let index = this.getTabIndex(url)
        this.setState({
            tabIndex: index
        })
    }
    // 獲取頁面索引
    getTabIndex(url){
        let index = 0
        switch (url) {
            case '/home/index':
                index = 0
            break
            case '/home/cart':
                index = 1
            break
            case '/home/my':
                index = 2
            break
            default:
                index = 0
        }
        return index
    }
    // 刷新選中默認的tab
    refreshDefaultTab() {
        let index = this.getTabIndex(this.props.history.location.pathname)
        this.setState({
            tabIndex: index
        })
    }
    render(){
        return(
            <div class="app"> <React.Fragment> <Switch> <Route path={config.path + 'home/index'} component={IndexComponent}></Route> <Route path={config.path + 'home/cart'} component={CartComponent}></Route> <Route path={config.path + 'home/my'} component={UserComponent}></Route> </Switch> </React.Fragment> {/*底部導航欄*/} <div className={Css['footer-nav']}> <div className={Css['footer-nav-item']} onClick={this.goPage.bind(this,'/home/index')}> <div className={this.state.tabIndex === 0 ? Css['footer-nav-item-icon'] + ' ' + Css['home'] + ' ' + Css['active']: Css['footer-nav-item-icon'] + ' ' + Css['home']}></div> <div className={this.state.tabIndex === 0 ? Css['footer-nav-item-title'] + ' ' + Css['active'] : Css['footer-nav-item-title']}>首頁</div> </div> <div className={Css['footer-nav-item']} onClick={this.goPage.bind(this,'/home/cart')}> <div className={this.state.tabIndex === 1 ? Css['footer-nav-item-icon'] + ' ' + Css['cart'] + ' ' + Css['active'] : Css['footer-nav-item-icon'] + ' ' + Css['cart'] }></div> <div className={ this.state.tabIndex === 1 ? Css['footer-nav-item-title'] + ' ' + Css['active']: Css['footer-nav-item-title']}>購物車</div> </div> <div className={Css['footer-nav-item']} onClick={this.goPage.bind(this,'/home/my')}> <div className={this.state.tabIndex === 2 ? Css['footer-nav-item-icon'] + ' ' + Css['my'] + ' ' + Css['active'] : Css['footer-nav-item-icon'] + ' ' + Css['my']}></div> <div className={this.state.tabIndex === 2 ? Css['footer-nav-item-title'] + ' ' + Css['active']: Css['footer-nav-item-title'] }>個人</div> </div> </div> </div>
        );
    }
}
複製代碼

項目：git地址 github.com/liujun8892/…