在vue項(xiàng)目中使用Swiper插件詳解

更新時(shí)間：2023年01月14日 10:25:50 作者：前端-文龍剛

這篇文章主要介紹了在vue項(xiàng)目中使用Swiper插件詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue項(xiàng)目使用Swiper插件

場(chǎng)景：平時(shí)在做項(xiàng)目的時(shí)候，肯定會(huì)遇到圖片輪播的效果，在此，記錄使用Swiper插件的圖片輪播效果，這里只是我自己使用的一種方式

先看效果圖

第一步：下載Swiper插件

npm install swiper vue-awesome-swiper --save

第二步：在對(duì)應(yīng)的組件頁(yè)面中導(dǎo)入該插件

在main.js中導(dǎo)入

import "swiper/swiper-bundle.css"
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

在對(duì)應(yīng)的組件頁(yè)面中導(dǎo)入

import Swiper from 'swiper/swiper-bundle.esm.js';
var swiper = new Swiper('.swiper');

第三步：編寫對(duì)應(yīng)的html部分

<div class="swiper">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(item,i) in imgList_2" :key="i">
          <img :src="item.url" :alt="item.name">
        </swiper-slide>
      </swiper>
      <div class="swiper-pagination" slot="pagination"></div>
      <!-- 如果需要導(dǎo)航按鈕 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>

:options="swiperOptions" 對(duì)應(yīng)的配置

第四步：在data中配置對(duì)應(yīng)的參數(shù)

data() {
    return {
      swiperOptions: {
       // loop: true, // 循環(huán)模式選項(xiàng)
          pagination: {// 如果需要分頁(yè)器
            el: '.swiper-pagination'
          },
          autoplay: {
            delay: 5000,//自動(dòng)滾動(dòng)的間隔時(shí)間
            stopOnLastSlide: false,//如果設(shè)置為true，當(dāng)切換到最后一個(gè)slide時(shí)停止自動(dòng)切換（loop模式下無效）。
            disableOnInteraction: false,//用戶操作swiper之后，是否禁止autoplay。默認(rèn)為true
          },
          // 如果需要前進(jìn)后退按鈕
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        }
    };
  }

到這一步就基本完成了一個(gè)簡(jiǎn)單的圖片切換效果，如果想要其它的效果可以參考官網(wǎng)的API

Swiper Vue.js Components

vue使用swiper插件時(shí)遇到的錯(cuò)誤

今天在用vue使用swiper插件時(shí)遇到這樣的錯(cuò)誤

vue-awesome-swiper.js?7212:1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘_c’)

附上導(dǎo)入的代碼：

import { swiper, swiperSlide} from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

解決方案

在vue-awesome-swiper后面添加/src

import { swiper, swiperSlide} from 'vue-awesome-swiper/src'
import 'swiper/swiper-bundle.css'

附上完整代碼：

<template>
  <div>
    <swiper :options="swiperOptions">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
// swiper插件
import { swiper, swiperSlide} from 'vue-awesome-swiper/src'
import 'swiper/swiper-bundle.css'

export default {
  name: "TestComponent",
  // 注冊(cè)組件
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOptions: {
        slidesPerView: 4,//顯示個(gè)數(shù)
        direction: 'horizontal', // 水平方向
        pagination: {
          el: '.swiper-pagination'
        },
      }
    }
  },
}
</script>

<style scoped>
</style>