Vue+Koa2移動電商實戰 (五)mock資料使用和佈局
前面我們已經獲取到了資料,這節我們就好把它用到我們的專案中來。這節課我們主要是使用flex佈局和for迴圈是我們的type_bar展示出來。
關於flex佈局的話如果還不是很瞭解的小夥伴兒可以查閱下阮一峰大神的部落格(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
首頁商品分類欄的佈局
HTML:
我們採用v-for的方式將商品分類欄迴圈出來,並給了每個圖片百分之九十的寬度,我這裡因為第一張圖片格式不對,多以單獨新增了寬度的<br><br> <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><br><br><br>//js我就直接寫在這裡了 主要就是從服務端獲取到,然後渲染到我們前端
this.advertesPicture = Response.data.data.advertesPicture
改寫我們的swiper輪播組
<!-- swiper area -->
<div class="swiper_www.dfgjyl.cn area">
<van-swipe :autoplay="3000">
<van-swipe-item v-for=www.gcyL157.com"(banner, index) in slides" :key="index">
<img v-lazy="banner.image"www.michenggw.com width="100%" height="167px">
</van-swipe-item>
</van-swipe>
</div><br><br>js:
this.slides www.mhylpt.com= Response.www.yigouyule2.cn data.data.slides; //獲取到圖片
在HTML中我們只需要修改我們原來自己新增的假資料換成我們從mock獲取到的資料就好啦。這樣我們就完成了這節的內容,mock資料的獲取
使用flex佈局進行分類欄的佈局以及我們的swipe的改造。很高興又學完了一節 簡直美滋滋
相關文章
- 實戰電商頁面1:靜態佈局
- 移動端佈局
- 使用rem進行移動端佈局REM
- 移動佈局基礎之 流式佈局
- flex佈局實戰Flex
- 移動端flex佈局Flex
- Web移動端佈局Web
- 浮動佈局 和 flex佈局Flex
- 跨境電商佈局中國網購黑五有望拉動消費迴流
- 使用 CSS columns 佈局來實現自動分組佈局CSS
- web移動佈局所需:remWebREM
- 移動端佈局方案探究
- CSS佈局–聖盃佈局和雙飛翼佈局以及使用Flex實現聖盃佈局CSSFlex
- 總結個人使用過的移動端佈局方法
- 移動 WEB 開發的佈局方式 ---- 響應式佈局Web
- 愛奇藝五週年佈局影片電商 愛奇藝商城正式上線
- 移動端佈局基礎viewportView
- Bootstrap實戰 - 瀑布流佈局boot
- 移動端網頁固定佈局例項使用媒體查詢rem進行佈局。網頁REM
- UITableViewCell使用自動佈局的“最佳實踐”UIView
- Masonry自動佈局使用
- 使用Charles mock資料Mock
- 利用vw+rem實現移動web適配佈局REMWeb
- 移動端適配-Rem 佈局篇REM
- 移動端的適配及佈局
- Flutter實戰之基本佈局篇Flutter
- 第五大容器佈局——流式佈局
- web移動端佈局的那些事兒Web
- 移動優先的響應式佈局
- SharePoint佈局頁建立(實戰)
- SharePoint佈局頁引用(實戰)
- Flutter Widget 靜態佈局實戰Flutter
- 電商大資料學習筆記:實戰大資料筆記
- lib-flexible 實現移動端自適應佈局Flex
- 移動端佈局方案彙總&&原理解析
- 第三代移動端佈局方案
- 保安日記:前端學習第十三篇之移動端佈局rem佈局前端REM
- 簡單專案實戰flutter(佈局篇)Flutter