Vue.js+Koa2移动电商实战8

Mock数据的使用flex布局

　首页商品分类栏的布局

　　　使用了flex布局，因为采用van-row是24格布局，你5个元素是不好分的，所以使用flex布局。
　　1.提取Mock数据

　　　在js代码created的axios then 方法里写入下面代码：

created(){
    axios({
        url: 'https://www.easy-mock.com/mock/5ae2eeb23fbbf24d8cd7f0b6/SmileVue/index',
        method: 'get',
    })
    .then(response => {
        console.log(response)
        if(response.status==200){
            this.category=response.data.data.category;
        }
    })
    .catch((error) => {     
    })
}
 

　编写html代码

　　有了数据，可以把html的骨架编写上去，代码如下。

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

　　这里使用了div嵌套的方式，这样只要在外层div上使用flex布局就可以让5个元素均匀分部。

　CSS样式

　　CSS主要采用了flex布局，flex的详细语法不进行讲解，你们可以看阮一峰大神的文章，你完全可以学的很好。

 .type-bar{
      background-color: #fff;
      margin:0 .3rem .3rem .3rem;
      border-radius: .3rem;
      font-size:14px;
      display: flex;
      flex-direction:row;
      flex-wrap:nowrap;
  }
  .type-bar div{
      padding: .3rem;
      font-size: 12px;
      text-align: center;
  }
 

　广告Banner的布局

　　先在created里获取数据，然后进行html骨架编写，最后进行CSS样式的调整

this.adBanner = response.data.data.advertesPicture //获得广告图片

　　html代码编写

<!--AD banner area-->
<div class="ad-banner">
    <img v-lazy="adBanner.PICTURE_ADDRESS" width="100%">
</div>

改造swpie组件

　　前面的课程已经用静态数据模拟了轮播效果，现在我们有了Mock数据，完全可以用Mack数据代替。
　　先获取轮播图片地址数组。

<div class="swiper-area">
    <van-swipe :autoplay="1000">
        <van-swipe-item v-for="(banner,index) in bannerPicArray" :key="index">
            <img v-lazy="banner.image" width="100%"/>
        </van-swipe-item>
    </van-swipe>
</div>