Vue+Koa2移動電商實戰 （五）mock資料使用和佈局

前面我們已經獲取到了資料，這節我們就好把它用到我們的專案中來。這節課我們主要是使用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的改造。很高興又學完了一節   簡直美滋滋