这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战。

一、fetch加载loading

1. 在index.html 中写一个loading的元素
<div id="page-load" class="load"></div>
2. 在public.css中写loading的样式
.load{
    width:1.5rem;
    height:1.5rem;
    background-image:url("../../images/common/load.gif");
    background-size:100%;
    background-repeat: no-repeat;
    background-position: center;
    position: fixed;
    z-index: 999;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    display:none;
}
3. 每次请求，通过react-dom控制loading元素的现实隐藏
import ReactDom from 'react-dom'

let loadEl = ReactDom.findDOMNode(document.getElementById('page-load'))

function request(url,method = 'get') {
    showLoading()
    return  fetch(`${config.baseUrl}${url}?token=${config.token}`,{method: method})
        .then(res => {
            hideLoading()
           return  res.json()
        })
}

function showLoading() {
    loadEl.style.display = 'block'
}

function hideLoading() {
    loadEl.style.display = 'none'
}

效果如下

二、图片懒加载

1. 引入echo.js
2. 封装utils工具类
import echo from '../libs/echo.js';
function lazyImg(){
    echo.init({
        offset : 100,//可是区域多少像素可以被加载
        throttle : 0 //设置图片延迟加载的时间
    });
}
export {
    lazyImg
}
3. 在每次setState后的callback中，初始化图片懒加载方法
import {lazyImg} from '../../../assets/js/utils/util.js';

request(config.baseUrl+"/api/home/index/recom?token="+config.token).then(res=>{
            if (res.code ===200){
                this.setState({aRecoGoods:res.data},()=>{
                    lazyImg();
                })
            }
        } )
        
 <img src={require("../../../assets/images/common/lazyImg.jpg")} data-echo={item2.image} alt={item2.title}/>       

三、新建一个分类页面

搜索框
<div id='goods'>
    <div className="search-bar">
        <div className="search-icon"></div>
        <div className="search-container">输入宝贝名称</div>
    </div>
</div>

3.2 左侧导航栏

{/*  分类列表  */}
<div className="classify-container">
    <div className="classify-name-list">
        <div className="classify-name-item active">商品名称1</div>
        {this.state.classifyNames.map((item,index) => (<div className="classify-name-item" key={index}>商品名称{index+2}</div>
        ))}
    </div>
</div>
.classify-container {
  height: calc(100vh - 2.5rem);
  width: 100%;
  .classify-name-list {
    width: 4.3rem;
    height: 100%;
    overflow-y: auto;
    background-color: #FFFFFF;
    .classify-name-item {
      width: 100%;
      height: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #EFEFEF;
      background-color: #FFFFFF;
      font-size: 0.7rem;
      overflow: hidden;
      &.active {
        color: #ff0000;
      }
    }
  }
}

6. 右侧详情子路由

1. 新建item子路由
<div className="classify-goods-list">
    <Switch>
        <Route path={config.path + 'goods/classify/items'} component={GoodsItemComponent}></Route>
    </Switch>
</div>
2. 子路由静态布局
<div id='classify-items'>
    <div className="card">
        <div className="card-header">
            裙装
        </div>
        <div className="card-body">
            <div className="card-goods-item">
                <img src="//vueshop.glbuys.com/uploadfiles/1484284030.jpg" alt="裙装裙装6"/>
                <div className="goods-title">裙装裙装6</div>
            </div>
            <div className="card-goods-item">
                <img src="//vueshop.glbuys.com/uploadfiles/1484284030.jpg" alt="裙装裙装6"/>
                <div className="goods-title">裙装裙装6</div>
            </div><
            div className="card-goods-item">
                <img src="//vueshop.glbuys.com/uploadfiles/1484284030.jpg" alt="裙装裙装6"/>
                <div className="goods-title">裙装裙装6</div>
            </div>
            <div className="card-goods-item">
                <img src="//vueshop.glbuys.com/uploadfiles/1484284030.jpg" alt="裙装裙装6"/>
                <div className="goods-title">裙装裙装6</div>
            </div>
            <div className="card-goods-item">
                <img src="//vueshop.glbuys.com/uploadfiles/1484284030.jpg" alt="裙装裙装6"/>
                <div className="goods-title">裙装裙装6</div>
            </div>
            <div className="card-goods-item">
                <img src="//vueshop.glbuys.com/uploadfiles/1484284030.jpg" alt="裙装裙装6"/>
                <div className="goods-title">裙装裙装6</div>
            </div>
        </div>
    </div>
</div>

#classify-items {
  .card {
    width: 100%;
    .card-header {
      font-size: 0.7rem;
      width: 100%;
      height: 1.7rem;
      line-height: 1.7rem;
      overflow: hidden;
    }
    .card-body {
      width: 100%;
      height: auto;
      background-color: #FFFFFF;
      padding-top: 0.5rem;
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      .card-goods-item {
        width: 33.33%;
        text-align: center;
        margin-bottom: 0.5rem;
        img {
          width: auto;
          height: auto;
          max-width: 3.5rem;
          max-height: 3.5rem;
        }
        .goods-title {
          width: 90%;
          height: 1rem;
          font-size: 0.6rem;
          overflow: hidden;
          text-align: center;
          margin: 0 auto;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-top: 0.2rem;
        }
      }
    }
  }
}

项目地址

https://github.com/liujun8892/reactshop