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;
  }