Vue3 初始化swiper以及如何使用swiper的方法与事件

Vue3 初始化swiper以及如何使用swiper的方法与事件

初始化swiper

1. 首先需要下载swiper.js

   npm install swiper
   

   我的版本是"swiper": "^8.1.3",
2. 在需要使用的地方引入
   不同版本的swiper，包的路径是不相同的

   	import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";
   	import "swiper/swiper.min.css";	
   

3. 使用swiper

         <swiper>
          <swiper-slide v-for="(item, i) in imgs" :key="item">
            <img :src="item" />
          </swiper-slide>
        </swiper>
   

使用swiper事件

      <swiper
        @slideChangeTransitionEnd="onSlideChangeTransitionEnd"
      >
        <swiper-slide v-for="(item, i) in imgs" :key="item">
          <img :src="item" />
        </swiper-slide>
      </swiper>

在vue3中，所有的事件都是通过在<swiper>绑定对应的事件实现的

使用swiper方法

使用swiper方法是需要创建一个swiper的实例

1. 首先我们需要在swiper组件中绑定一个swiper的事件，以获得该swiper的实例

         <swiper
           @swiper="setControlledSwiper"
           @slideChangeTransitionEnd="onSlideChangeTransitionEnd"
         >
           <swiper-slide v-for="(item, i) in imgs" :key="item">
             <img :src="item" />
           </swiper-slide>
         </swiper>
   

2. 利用事件创建实例

       const setControlledSwiper = (swiper) => {
        controlledSwiper = swiper
      }
   

   注意：该函数一定要return出去
3. 使用swiper方法

       const notSubmit = () => {
        controlledSwiper.slideTo(1)
        activeIndex.value = activeIndex.value + 1
      }
   

swiper组件功能的使用

使用组件也必须先导入

	//import Swiper core and required modules
	import { Navigation, Pagination, Scrollbar, A11y } from "swiper";

	setup(){
		retrun{
			modules: [Navigation, Pagination, Scrollbar, A11y],
		}
	}

	 <swiper
	   :modules="modules"
	   :slides-per-view="1"
	   :space-between="50"
	   navigation
	   :pagination="{ clickable: true }"
	   :scrollbar="{ draggable: true }"
	 >
	<swiper>