vue-awesome-swiper 初探

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了，