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），對應的是swiper6，但是國內暫時沒有swiper6的文檔，意味著沒法參考使用方法，有問題也不好去網上找

坑2

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

npm install swiper vue-awesome-swiper --save

對比vue-awesome-swiper版本3

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

坑3

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

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

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 //允許分頁點擊跳轉
? ? ? ? },
? ? ? ? // 設置點擊箭頭
? ? ? ? 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 //允許分頁點擊跳轉
? ? ? ? },
? ? ? ? // 設置點擊箭頭
? ? ? ? navigation: {
? ? ? ? ? nextEl: ".swiper-button-next",
? ? ? ? ? prevEl: ".swiper-button-prev"
? ? ? ? }
? ? ? }
? ? };
? },
? computed: {
? ? swiper() {
? ? ? return this.$refs.mySwiper.swiper;
? ? }
? },
? mounted() {
? ? // current swiper instance
? ? // 然后你就可以使用當前上下文內的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頁面寫好如下結構

<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 //允許分頁點擊跳轉
? ? ? ? },
? ? ? ? // 設置點擊箭頭
? ? ? ? navigation: {
? ? ? ? ? nextEl: ".swiper-button-next",
? ? ? ? ? prevEl: ".swiper-button-prev"
? ? ? ? }
? ? ? }
? ? };
? },
? computed: {
? ? swiper() {
? ? ? return this.$refs.mySwiper.swiper;
? ? }
? },
? mounted() {
? ? // current swiper instance
? ? // 然后你就可以使用當前上下文內的swiper對象去做你想做的事了
? ? console.log("this is current swiper instance object", this.swiper);
? ? // this.swiper.slideTo(3, 1000, false);
? }
};
</script>
<style scoped >
</style>

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

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

餓了么UI中el-tree樹節(jié)點選中高亮的兩種常用方式(highlight-current屬性)
最近新做的項目有用到Element-UI tree組件,下面這篇文章主要給大家介紹了關于餓了么UI中el-tree樹節(jié)點選中高亮的兩種常用方式(highlight-current屬性),文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-12-12
Vue淺拷貝和深拷貝實現(xiàn)方案
在理解淺拷貝和深拷貝淺前，必須先理解基本數據類型和引用數據類型的區(qū)別，這篇文章主要介紹了Vue淺拷貝和深拷貝實現(xiàn)方案及區(qū)別對比分析,需要的朋友可以參考下
2023-03-03
基于vue-simple-uploader封裝文件分片上傳、秒傳及斷點續(xù)傳的全局上傳插件功能
這篇文章主要介紹了基于vue-simple-uploader封裝文件分片上傳、秒傳及斷點續(xù)傳的全局上傳插件,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-02-02
一文搞懂Vue八大生命周期鉤子函數
這篇文章主要介紹了Vue八大生命周期鉤子函數,生命周期函數，就是在某個時刻會自動執(zhí)行的函數,本文帶你了解八大生命周期鉤子函數,一起來看看吧
2023-03-03
解決Vue運行項目報錯proxy?error:?could?not?proxy?request
這篇文章主要給大家介紹了關于如何解決Vue運行項目報錯proxy?error:could?not?proxy?request的相關資料,Proxy Error指的是代理服務器無法正確處理請求的錯誤,需要的朋友可以參考下
2023-08-08
vue與iframe頁面數據互相通信的實現(xiàn)示例
這篇文章主要給大家介紹了vue與iframe頁面數據互相通信的實現(xiàn)示例,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
2023-12-12
vue再次進入頁面不會再次調用接口請求問題
這篇文章主要介紹了vue再次進入頁面不會再次調用接口請求問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
如何在Vue3中正確使用ElementPlus,親測有效,避坑
這篇文章主要介紹了如何在Vue3中正確使用ElementPlus,親測有效,避坑！具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue模仿網易云音樂的單頁面應用
這篇文章主要介紹了vue仿網易云音樂的單頁面應用實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-04-04
Vue?Router解決多路由復用同一組件頁面不刷新問題(場景分析)
這篇文章主要介紹了Vue?Router解決多路由復用同一組件頁面不刷新問題,多路由復用同一組件的場景分析，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-08-08