1，首先 下載好vue-awesome-swiper 插件，npm install vue-awesome-swiper --save或簡寫 npm ivue-awesome-swiper -s
2.寫好vue-awesome-swiper 基本結構
引入 vue-awesome-swiper
import 'swiper/dist/css/swiper.css' //引入組件樣式
import {swiper,swiperSlide} from 'vue-awesome-swiper' //引入組件
<swiper :options="swiperOption">
<swiper-slide v-for="(item,index) in recommendGoods" :key=index>
<div class="recommend_item">
<img v-lazy='item.image' width="100%"/>
<div>{{item.goodsName}}</div>
<div>￥{{item.price}}({{item.mallPrice}})￥</div>
</div>
</swiper-slide>
</swiper>
export default{
data(){
return {
swiperOption:{ /// vue-awesome-swiper 的配置項在這
slidesPerView:3，
direction:'vertical', //配置豎屏顯示
pagination:{
el:'swiper-pagination'
}
}
},
components:{
swiper ,
swiperSlide
}
}
//基本的方法就是ok了，
浙公網安備 33010602011771號