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

转载于:https://www.cnblogs.com/shiguoxiong/p/9544554.html