今天我們要制作的是商品推薦欄，也就是下面的這個，這個是有一個滑動效果的

首先還是來看我們的布局

HTML

    <!-- recommend goods area -->
    <div class="recommend_area">
      <div class="recommend_title">商品推薦</div>
      <div class="recommend_content">
        <swiper :options="swiperOption">
          <swiper-slide v-for=" (item ,index) in recommend_goods" :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>
      </div>
    </div>

CSS：

  /*recommend_area*/
  .recommend_area {
    background: #fff;
    margin-top: .3rem;
  }

  .recommend_title {
    border-bottom: 1px solid #eee;
    text-align: center;
    font-size: 15px;
    color: #e5017d;
    padding: .3rem
  }

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

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

布局完成之後我們就要開始進入正題了

安裝我們的vue-awesome-swiper了，在終端輸入

npm install vue-awesome-swiper --save

安裝完成後我們在頁面進行引入

  import ‘swiper/dist/css/swiper.css‘
  import {swiper,swiperSlide} from ‘vue-awesome-swiper‘

這裏我們因為使用的是從mock請求過來的數據，所以要使用axios進行數據交互

獲取到我們的 recommend

this.recommend_goods = Response.data.data.recommend //商品推薦 

我們需要定義一個數據來接受這個從服務端請求過來的參數
recommend_goods: [],

awsome-swiper做這種推薦欄的時候我們還需要給他設置讓它在一欄顯示多少數據，如果不設置的話只會顯示一個的，這裏我們就讓它一次性顯示三個，然後可以左右滑動

 swiperOption:{
          slidesPerView:3
        },

Vue+Koa2移動電商實戰 （六）使用vue-awesome-swiper 制作商品推薦欄