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

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

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

一、什么是vue-awesome-swiper？

簡(jiǎn)而言之：

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> //滾動(dòng)條
? ? <div class="swiper-button-next"></div> //下一項(xiàng)
? ? <div class="swiper-button-prev"></div> //上一項(xiàng)
? ? <div class="swiper-pagination"></div> //標(biāo)頁(yè)碼
? data(){
? ? return{
? ? ? swiperOption: {//swiper3
? ? ? autoplay: 3000,
? ? ? speed: 1000,
? ? ? }
? ? }
? }

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

坑1

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

坑2

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

npm install swiper vue-awesome-swiper --save

對(duì)比vue-awesome-swiper版本3

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

坑3

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

安裝完之后，你又在某度上查找使用方法，網(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
? ? ? ? },
? ? ? ? // 顯示分頁(yè)
? ? ? ? pagination: {
? ? ? ? ? el: ".swiper-pagination",
? ? ? ? ? clickable: true //允許分頁(yè)點(diǎn)擊跳轉(zhuǎn)
? ? ? ? },
? ? ? ? // 設(shè)置點(diǎn)擊箭頭
? ? ? ? navigation: {
? ? ? ? ? nextEl: ".swiper-button-next",
? ? ? ? ? prevEl: ".swiper-button-prev"
? ? ? ? }
? ? ? }
? ? };
? },

然后你的vue就使勁跟你報(bào)錯(cuò)，說(shuō)找不到swiper.css，然后你又繼續(xù)某度，無(wú)限坑。。。

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

npm install swiper --save

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

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

正確的使用姿勢(shì)：

安裝（指定版本）

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

組件中使用

這里我貼出在頁(yè)面中簡(jiǎn)單使用方法（先跑起來(lái)），小伙伴們可以完全復(fù)制粘貼，復(fù)雜的東西我都簡(jiǎn)化掉了。版本: 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
? ? ? ? },
? ? ? ? // 顯示分頁(yè)
? ? ? ? pagination: {
? ? ? ? ? el: ".swiper-pagination",
? ? ? ? ? clickable: true //允許分頁(yè)點(diǎn)擊跳轉(zhuǎn)
? ? ? ? },
? ? ? ? // 設(shè)置點(diǎn)擊箭頭
? ? ? ? navigation: {
? ? ? ? ? nextEl: ".swiper-button-next",
? ? ? ? ? prevEl: ".swiper-button-prev"
? ? ? ? }
? ? ? }
? ? };
? },
? computed: {
? ? swiper() {
? ? ? return this.$refs.mySwiper.swiper;
? ? }
? },
? mounted() {
? ? // current swiper instance
? ? // 然后你就可以使用當(dāng)前上下文內(nèi)的swiper對(duì)象去做你想做的事了
? ? 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>

三、例子

我寫(xiě)的是局部的,只需要在在ha.vue頁(yè)面寫(xiě)好如下結(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
? ? ? ? },
? ? ? ? // 顯示分頁(yè)
? ? ? ? pagination: {
? ? ? ? ? el: ".swiper-pagination",
? ? ? ? ? clickable: true //允許分頁(yè)點(diǎn)擊跳轉(zhuǎn)
? ? ? ? },
? ? ? ? // 設(shè)置點(diǎn)擊箭頭
? ? ? ? navigation: {
? ? ? ? ? nextEl: ".swiper-button-next",
? ? ? ? ? prevEl: ".swiper-button-prev"
? ? ? ? }
? ? ? }
? ? };
? },
? computed: {
? ? swiper() {
? ? ? return this.$refs.mySwiper.swiper;
? ? }
? },
? mounted() {
? ? // current swiper instance
? ? // 然后你就可以使用當(dāng)前上下文內(nèi)的swiper對(duì)象去做你想做的事了
? ? console.log("this is current swiper instance object", this.swiper);
? ? // this.swiper.slideTo(3, 1000, false);
? }
};
</script>
<style scoped >
</style>

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