前面我們已經獲取到了數據，這節我們就好把它用到我們的項目中來。這節課我們主要是使用flex布局和for循環是我們的type_bar展示出來。

關於flex布局的話如果還不是很了解的小夥伴兒可以查閱下阮一峰大神的博客(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)

首頁商品分類欄的布局

HTML：

  我們采用v-for的方式將商品分類欄循環出來，並給了每個圖片百分之九十的寬度，我這裏因為第一張圖片格式不對，多以單獨添加了寬度的

 <div class="type_bar">
        <div v-for="(item,index) in category" :key="index">
            <img v-lazy="item.image" width="90%">
            <span>{{item.mallCategoryName}}</span>
        </div>
    </div>

　CSS：

/* type_bar*/
.type_bar{
    background: #fff;
    margin: 0.3rem .3rem .3rem;
    border-radius: .3rem;
    font-size: 14px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
}
.type_bar>div{
    padding: .3rem;
    font-size: 12px;
    text-align: center
}
.type_bar>div>img:nth-child(1){
    width: 3.3rem;
}

　javascript：

        .then(Response => { /*我們的方法都寫在這裏*/
          console.log(Response)
          if (Response.status == 200) {
            this.category = Response.data.data.category
            console.log(this.category)
          }
        })

　　在這裏我們需要註意一點的是我們是這裏使用的 this.category 的category需要在我們的return裏面註冊，後面我們使用的對象參數也是同樣的道理

廣告欄

   <!-- advertes Picture -->
    <div class="advertes_picture">
        <img v-lazy=‘advertesPicture.PICTURE_ADDRESS‘ width="100%">
    </div>


//js我就直接寫在這裏了  主要就是從服務端獲取到，然後渲染到我們前端

改寫我們的swiper輪播組件

    <!-- swiper area -->
    <div class="swiper_area">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(banner, index) in slides" :key="index">
          <img v-lazy="banner.image" width="100%" height="167px">
        </van-swipe-item>
      </van-swipe>
    </div>

js:

在HTML中我們只需要修改我們原來自己添加的假數據換成我們從mock獲取到的數據就好啦。這樣我們就完成了這節的內容，mock數據的獲取

使用flex布局進行分類欄的布局以及我們的swipe的改造。很高興又學完了一節 簡直美滋滋

Vue+Koa2移動電商實戰 （五）mock數據使用和布局