快捷導(dǎo)航

vue3中使用swiper的完整版教程(超詳細(xì)!)

更新時(shí)間：2023年04月10日 09:34:52 作者：發(fā)呆的薇薇°

工作中日常筆記,vue中使用swiper插件,在pc端和h5端也是常用的插件,下面這篇文章主要給大家介紹了關(guān)于vue3中使用swiper的完整版教程,需要的朋友可以參考下

介紹

在 vue3 中使用 swiper, 實(shí)現(xiàn)輪播圖的效果；如果組件樣式等模塊引入不當(dāng)，很有可能導(dǎo)致，頁(yè)面無(wú)效果；或者想要的箭頭或者切換效果異常問(wèn)題。具體使用方式如下所示：

使用方式

使用命令 npm install swiper 安裝 swiper插件；

在main.js里使用樣式文件，如下所示：

import App from './App.vue'
import router from './router'
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/css';
createApp(App).use(VueAwesomeSwiper).use(router).mount('#app')

在使用的頁(yè)面，引入需要使用到的組件，比如常用的左右切換箭頭，小圓點(diǎn)指示器等；如下所示：

import { Swiper, SwiperSlide } from 'swiper/vue'
// 引入swiper樣式（按需導(dǎo)入）
import 'swiper/css/pagination' // 輪播圖底面的小圓點(diǎn)
import 'swiper/css/navigation' // 輪播圖兩邊的左右箭頭
// import 'swiper/css/scrollbar'  // 輪播圖的滾動(dòng)條， 輪播圖里一般不怎么會(huì)使用到滾動(dòng)條，如果有用到的話import導(dǎo)入就行
// 引入swiper核心和所需模塊
import { Autoplay, Pagination, Navigation, Scrollbar } from 'swiper'

const navigation = ref({
  nextEl: ".swiper-button-next",
  prevEl: ".swiper-button-prev",
});
// 在modules加入要使用的模塊
const modules = [Autoplay, Pagination, Navigation, Scrollbar]
const prevEl = (item, index) => {
  // console.log('上一張' + index + item)
};
const nextEl = () => {
  // console.log('下一張')
};
// 更改當(dāng)前活動(dòng)swiper
const onSlideChange = (swiper) => {
// swiper是當(dāng)前輪播的對(duì)象，里面可以獲取到當(dāng)前swiper的所有信息，當(dāng)前索引是activeIndex
  console.log(swiper.activeIndex)
}

在頁(yè)面中使用組件和相關(guān)的模塊

<swiper
    :modules="modules"
	:loop="true"
	:slides-per-view="1"
	:space-between="50"
	:autoplay="{ delay: 4000, disableOnInteraction: false }"
	:navigation="navigation"
	:pagination="{ clickable: true }"
	:scrollbar="{ draggable: false }"
   	class="swiperBox"
   	@slideChange="onSlideChange"
>
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <div class="swiper-button-prev" @click.stop="prevEl(item, index)" />
    <!--左箭頭。如果放置在swiper外面，需要自定義樣式。-->
    <div class="swiper-button-next" @click.stop="nextEl" />
    <!--右箭頭。如果放置在swiper外面，需要自定義樣式。-->
    <!-- 如果需要滾動(dòng)條 -->
    <!-- <div class="swiper-scrollbar"></div> -->
</swiper>

參數(shù)介紹：

modules：

loop：是否循環(huán)播放
slides-per-view：控制一次顯示幾張輪播圖
space-between：每張輪播圖之間的距離，該屬性不可以和margin 屬性同時(shí)使用；
autoplay：是否自動(dòng)輪播， delay為間隔的毫秒數(shù)；disableOnInteraction屬性默認(rèn)是true，也就是當(dāng)用戶手動(dòng)滑動(dòng)后禁用自動(dòng)播放，設(shè)置為false后，將不會(huì)禁用，會(huì)每次手動(dòng)觸發(fā)后再重新啟動(dòng)自動(dòng)播放。
navigation：定義左右切換箭頭
pagination：控制是否可以點(diǎn)擊圓點(diǎn)指示器切換輪播
scrollbar：是否顯示輪播圖的滾動(dòng)條， draggable設(shè)置為 true就可以拖動(dòng)底部的滾動(dòng)條（輪播當(dāng)中，一般不怎么會(huì)使用到這個(gè)屬性）