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

商品推荐vue-awesome-swiper

　先来简单的布局

　　我们先把基本的布局做好，在src/components/pages/ShoppingMall.vue，里编写如下html和CSS代码，这里只是简单的布局。

<!--Recommend goods area-->
<div class="recommend-area">
    <div class="recommend-title">
        商品推荐
    </div>
    <div class="recommend-body">
        
    </div>
</div>
 

 .recommend-area{
       background-color: #fff;
       margin-top: .3rem;
  }
  .recommend-title{
      border-bottom:1px solid #eee;
      font-size:14px;
      padding:.2rem;
      color:#e5017d;
  }

　安装 vue-awesome-swiper

　　还是使用npm 来进行安装,我这里的安装版本是3.1.3,写文章时是最新版本，但是你看时，可能已经升级，注意查看官方文档。
　　github地址：https://github.com/surmon-china/vue-awesome-swiper

npm install vue-awesome-swiper --save

　　这种方式是在需要的页面以component 的形式引入，好处就是依赖性不强。

import 'swiper/dist/css/swiper.css'
 
import { swiper, swiperSlide } from 'vue-awesome-swiper'
 
export default {
  components: {
    swiper,
    swiperSlide
  }
}
 

　获取推荐商品数据

　　在javascript部分的data里加入recommendGoods:[]属性，然后在created生命周期里获得.

this.recommendGoods = response.data.data.recommend  //推荐商品

　编写swiper的html

 
<!--swiper-->
<swiper :options="swiperOption">
    <swiper-slide v-for=" (item ,index) in recommendGoods" :key="index">
        <div class="recommend-item">
            
                <img :src="item.image" width="80%" />
                <div>{{item.goodsName}}</div>
                <div>￥{{item.price}} (￥{{item.mallPrice}})</div>
                
        </div>
    </swiper-slide>
</swiper>
 

  .recommend-body{
       border-bottom: 1px solid #eee;
   }

  .recommend-item{
      width:99%;
      border-right: 1px solid #eee;
      font-size: 12px;
      text-align: center;
  }