vue 中使用 vue-awesome-swiper

1.安装

npm i / yarn add swiper@4.5.1 vue-awesome-swipe@3.1.3

2.使用

1.SPA 使用

<!-- swiper2 Thumbs -->
<swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
  <swiper-slide class="slide-1">
    <v-line :showHead="false" style="trasnform: scale(0.33)"></v-line>
  </swiper-slide>
  <swiper-slide class="slide-2">
    <v-bar :showHead="false" style="trasnform: scale(0.33)"></v-bar>
  </swiper-slide>
  <swiper-slide class="slide-3">
    <v-pie :showHead="false" style="trasnform: scale(0.33)"></v-pie>
  </swiper-slide>
  <swiper-slide class="slide-4">
    <v-order-line :showHead="false" style="trasnform: scale(0.33)"></v-order-line>
  </swiper-slide>
  <div class="swiper-button-prev btn-top btn-prev" slot="button-prev">
    <a-icon type="up-circle" />
  </div>
  <div class="swiper-button-next btn-top btn-next" slot="button-next">
    <a-icon type="down-circle" />
  </div>
</swiper>

配置
data () {
	// 左
	swiperOptionThumbs: {
	  direction: 'vertical',
	  loop: true,
	  autoplay: {
	    delay: 3000,
	    stopOnLastSlide: false,
	    disableOnInteraction: false
	  },
	  loopedSlides: 5, // looped slides should be the same
	  spaceBetween: 10,
	  centeredSlides: true,
	  slidesPerView: 3,
	  touchRatio: 0.2,
	  slideToClickedSlide: true,
	  mousewheel: true,
	  navigation: {
	    nextEl: '.swiper-button-next',
	    prevEl: '.swiper-button-prev'
	  }
	},
	// 右
	swiperOptionTop: {
	  direction: 'vertical',
	  loop: true,
	  autoplay: true,
	  loopedSlides: 5, // looped slides should be the same
	  spaceBetween: 10
	}
},
mounted () {
	// 双向控制
	this.$nextTick(() => {
		 const swiperTop = this.$refs.swiperTop.swiper
		 const swiperThumbs = this.$refs.swiperThumbs.swiper
		 swiperTop.controller.control = swiperThumbs
		 swiperThumbs.controller.control = swiperTop
	})
}

2.SSR 使用

<div
   ref="mySwiper"
   v-swiper:mySwiper="swiperOptions"
   dir="tlr"
   class="swiper-box swiper-container"
 >
   <div class="swiper-wrapper">
     <div
       v-for="(item, index) in LoginUserList"
       :key="index"
       class="swiper-slide"
     >
       <nuxt-link :to="{ name: 'product-id', params: { id: item.id } }">
         <div class="orga-name-box">
           <div class="orga-show-box">

             <el-image class="img-box" :src="item.avatar" fit="fill"></el-image>
             <p class="name">{{item.busName}}</p>
           </div>
         </div>
       </nuxt-link>
     </div>
   </div>
 </div>
配置
data () {
	swiperOptions: {
	   loop: true,
	   autoplay: {
	     delay: 0,
	     stopOnLastSlide: false,
	     disableOnInteraction: false,
	   },
	   autoUpdate: false,
	   speed: 5000,
	   // freeMode: true,
	   centeredSlides: true,
	   slidesPerView: 2,
	   slidesPerGroup: 1,
	   // loopAdditionalSlides: 6,
	   spaceBetween: 20,
	   clickable: true,
	   observeParents: false,
	   observer: true,
	 },
},
computed: {
	// 获取轮播图
    swiper() {
      return this.mySwiper
    },
}