vue中swiper?vue-awesome-swiper的使用方法及各種坑解決

更新時間：2023年01月14日 10:14:43 作者：@是靜靜啊

這篇文章主要介紹了vue中swiper?vue-awesome-swiper的使用方法及各種坑解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

一、什么是vue-awesome-swiper？

簡而言之：

vue-awesome-swiper是基于swiper的Vue組件。是swiper推薦的在vue中使用swiper的方式。

vue-awesome-swiper的使用

1、安裝

npm install ?vue-awesome-swiper --save-dev

2.引用

? ? /*全局引入*/
? ? import VueAwesomeSwiper from 'vue-awesome-swiper'
? ? import 'swiper/dist/css/swiper.css'//這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
? ? Vue.use(VueAwesomeSwiper, /* { default global options } */)
? ?
? ? /*組件方式引用*/
? ? import 'swiper/dist/css/swiper.css'這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
? ? import { swiper, swiperSlide } from 'vue-awesome-swiper'
? ? export default {
? ? components: {
? ? ? swiper,
? ? ? swiperSlide
? ? }

3.使用

就是一般組件的用法

? ? <swiper :options="swiperOption">
? ? ? <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
? ? ? <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
? ? ? <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
? ? ? <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
? ? ? <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
? ? ? <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
? ? </swiper>
? ? <!--以下看需要添加-->
? ? <div class="swiper-scrollbar"></div> //滾動條
? ? <div class="swiper-button-next"></div> //下一項
? ? <div class="swiper-button-prev"></div> //上一項
? ? <div class="swiper-pagination"></div> //標頁碼
? data(){
? ? return{
? ? ? swiperOption: {//swiper3
? ? ? autoplay: 3000,
? ? ? speed: 1000,
? ? ? }
? ? }
? }

二、由版本引起的一系列坑

坑1

按照上圖安裝方法，npm將安裝最新的vue-awesome-swiper（@4），對應(yīng)的是swiper6，但是國內(nèi)暫時沒有swiper6的文檔，意味著沒法參考使用方法，有問題也不好去網(wǎng)上找

坑2

最新版vue-awesome-swiper的安裝姿勢是這樣子滴：

npm install swiper vue-awesome-swiper --save

對比vue-awesome-swiper版本3

npm install vue-awesome-swiper --save-dev

坑3

這是網(wǎng)上大伙查找的最多的坑，搞了很久沒解決，有可能會導致小伙伴們暴躁易怒，哈哈

安裝完之后，你又在某度上查找使用方法，網(wǎng)友一般建議你這樣使用

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
? components: {
? ? swiper,
? ? swiperSlide
? },
? data() {
? ? return {
? ? ? swiperOption: {
? ? ? ? loop: true,
? ? ? ? autoplay: {
? ? ? ? ? delay: 3000,
? ? ? ? ? stopOnLastSlide: false,
? ? ? ? ? disableOnInteraction: false
? ? ? ? },
? ? ? ? // 顯示分頁
? ? ? ? pagination: {
? ? ? ? ? el: ".swiper-pagination",
? ? ? ? ? clickable: true //允許分頁點擊跳轉(zhuǎn)
? ? ? ? },
? ? ? ? // 設(shè)置點擊箭頭
? ? ? ? navigation: {
? ? ? ? ? nextEl: ".swiper-button-next",
? ? ? ? ? prevEl: ".swiper-button-prev"
? ? ? ? }
? ? ? }
? ? };
? },

然后你的vue就使勁跟你報錯，說找不到swiper.css，然后你又繼續(xù)某度，無限坑。。。

或者你去看了一下路徑，再去node_modules找swiper，發(fā)現(xiàn)沒有swiper這貨。那就安裝個swiper唄

npm install swiper --save

但是，你沒有帶版本，npm默認給你裝的是swiper6，文件夾里的路徑跟swiper4都不一樣啦兄弟們。

這才是問題的根源，加入你沒找到問題的核心，繼續(xù)某度的話，估計還沒好幾天辛苦滴爬坑。

正確的使用姿勢：

安裝（指定版本）

npm install vue-awesome-swiper@3 --save-dev

組件中使用

這里我貼出在頁面中簡單使用方法（先跑起來），小伙伴們可以完全復制粘貼，復雜的東西我都簡化掉了。版本: vue@2.5.2，vue-awesome-swiper@3.1.3

<template>
? <div class="recommendPage">
? ? <swiper :options="swiperOption" ref="mySwiper">
? ? ? <swiper-slide>I'm Slide 1</swiper-slide>
? ? ? <swiper-slide>I'm Slide 2</swiper-slide>
? ? ? <swiper-slide>I'm Slide 3</swiper-slide>
? ? ? <div class="swiper-pagination" slot="pagination"></div>
? ? ? <div class="swiper-button-prev" slot="button-prev"></div>
? ? ? <div class="swiper-button-next" slot="button-next"></div>
? ? </swiper>
? </div>
</template>

<script>
// 引入插件
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

export default {
? components: {
? ? swiper,
? ? swiperSlide
? },
? data() {
? ? return {
? ? ? swiperOption: {
? ? ? ? loop: true,
? ? ? ? autoplay: {
? ? ? ? ? delay: 3000,
? ? ? ? ? stopOnLastSlide: false,
? ? ? ? ? disableOnInteraction: false
? ? ? ? },
? ? ? ? // 顯示分頁
? ? ? ? pagination: {
? ? ? ? ? el: ".swiper-pagination",
? ? ? ? ? clickable: true //允許分頁點擊跳轉(zhuǎn)
? ? ? ? },
? ? ? ? // 設(shè)置點擊箭頭
? ? ? ? navigation: {
? ? ? ? ? nextEl: ".swiper-button-next",
? ? ? ? ? prevEl: ".swiper-button-prev"
? ? ? ? }
? ? ? }
? ? };
? },
? computed: {
? ? swiper() {
? ? ? return this.$refs.mySwiper.swiper;
? ? }
? },
? mounted() {
? ? // current swiper instance
? ? // 然后你就可以使用當前上下文內(nèi)的swiper對象去做你想做的事了
? ? console.log("this is current swiper instance object", this.swiper);
? ? // this.swiper.slideTo(3, 1000, false);
? }
};
</script>
<style scoped >
.recommendPage .swiper-container{
? position: relative;
? width: 100%;
? height: 200px;
? background: pink;
} ?
.recommendPage .swiper-container .swiper-slide{
? width: 100%;
? line-height: 200px;
? background: yellowgreen;
? color: #000;
? font-size: 16px;
? text-align: center;
}
</style>

三、例子

我寫的是局部的,只需要在在ha.vue頁面寫好如下結(jié)構(gòu)

<template>
?? ?<div class=''>
? ?<swiper :options="swiperOption" ref="mySwiper">
? ? ? <swiper-slide v-for="item in slide" :key="item.imgUrl">
? ? ? ? <img :src="item.imgUrl" alt="" class="swiper-slide-img" width="100%" height="100%"
? ? ? /></swiper-slide>
? ? ? <div class="swiper-pagination" slot="pagination"></div>
? ? </swiper>
? </div>
</template>

在script引入

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
? components: {
? ? swiper,
? ? swiperSlide
? },
? data() {
? ? return {
? ? ? swiperOption: {
? ? ? ? loop: true,
? ? ? ? autoplay: {
? ? ? ? ? delay: 3000,
? ? ? ? ? stopOnLastSlide: false,
? ? ? ? ? disableOnInteraction: false
? ? ? ? },
? ? ? ? // 顯示分頁
? ? ? ? pagination: {
? ? ? ? ? el: ".swiper-pagination",
? ? ? ? ? clickable: true //允許分頁點擊跳轉(zhuǎn)
? ? ? ? },
? ? ? ? // 設(shè)置點擊箭頭
? ? ? ? navigation: {
? ? ? ? ? nextEl: ".swiper-button-next",
? ? ? ? ? prevEl: ".swiper-button-prev"
? ? ? ? }
? ? ? }
? ? };
? },
? computed: {
? ? swiper() {
? ? ? return this.$refs.mySwiper.swiper;
? ? }
? },
? mounted() {
? ? // current swiper instance
? ? // 然后你就可以使用當前上下文內(nèi)的swiper對象去做你想做的事了
? ? console.log("this is current swiper instance object", this.swiper);
? ? // this.swiper.slideTo(3, 1000, false);
? }
};
</script>
<style scoped >
</style>

還有一些關(guān)于版本的坑，反正真的很坑，不然我不會大半夜氣呼呼在這寫這玩意