vue3中使用swiper及遇到的問題解析

更新時間：2023年04月12日 11:33:34 作者：金牌戰(zhàn)五渣

這篇文章主要介紹了vue3中使用swiper及遇到的問題,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

一、安裝swiper

使用npm install swiper安裝swpier插件

npm install swiper -s // @9.2.0
// 或者安裝指定版本
npm install swiper@8.4.7 -s

二、使用swiper

直接按照官網(wǎng)的引用方法，項目會報錯

解決方法：
引入的組件使用以下路徑

import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue";
import "swiper/swiper.min.css";

有時還需要使用一些其他的組件API，如：

<template>
? <swiper
? ? class="swpier"
? ? :modules="modules"
? ? :slides-per-view="3"
? ? :space-between="50"
? ? loop="true"
? ? direction="horizontal"
? ? navigation
? ? :autoplay="{
? ? ? delay: 2000,
? ? ? disableOnInteraction: false,
? ? ? pauseOnMouseEnter: true,
? ? }"
? ? :pagination="{ clickable: true }"
? ? :scrollbar="{ draggable: true }"
? ? @swiper="onSwiper"
? ? @slideChange="onSlideChange"
? >
? ? <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>
? </swiper>
</template>
<script>
// Navigation: 方向箭頭：向左，向右
/* Pagination: 輪播小圓點
clickable: 如果為true，則單擊分頁按鈕將跳轉(zhuǎn)到對應的slide。僅適用于項目符號分頁類型
*/
/* Scrollbar: 滾動條
draggable: 設(shè)置為true可使?jié)L動條可拖動，從而控制滑塊位置
*/
/* AutoPlay: 自動輪播
delay: 轉(zhuǎn)換之間的延遲（毫秒）。如果未指定此參數(shù)，將禁用自動播放
disableOnInteraction：設(shè)置為false，用戶交互（滑動）后自動播放不會被禁用，每次交互后都會重新啟動
pauseOnMouseEnter：啟用后，指針（鼠標）在Swiper容器上輸入時將暫停自動播放。
*/

import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue";
import "swiper/swiper.min.css";
import "swiper/modules/navigation/navigation.min.css";
import "swiper/modules/pagination/pagination.min.css";
import "swiper/modules/scrollbar/scrollbar.min.css";
import "swiper/modules/autoplay/autoplay.min.css";
export default {
? components: {
? ? Swiper,
? ? SwiperSlide,
? },
? setup() {
? ? const onSwiper = (swiper) => {
? ? ? console.log(swiper);
? ? };
? ? const onSlideChange = () => {
? ? ? console.log("slide change");
? ? };
? ? return {
? ? ? onSwiper,
? ? ? onSlideChange,
? ? ? modules: [Navigation, Pagination, Scrollbar, A11y, Autoplay],
? ? };
? },
};
</script>
<style>
.swpier {
? height: 200px;
}
.swiper-slide {
? width: 100px;
? line-height: 40px;
? font-size: 30px;
? text-align: center;
? border: 1px solid pink;
}
</style>

其中：

loop：是否循環(huán)播放：true/false
direction：輪播方向"horizontal"/“vertical”，默認"horizontal"
slides-per-view：控制一次顯示幾張輪播圖
space-between：每張輪播圖之間的距離，該屬性不可以和margin 屬性同時使用；

三、echarts+swiper

項目背景

需要在swiper的每個輪播項中展示并包含不同的echarts，且開啟loop:true循環(huán)

“echarts”: “^5.4.0”
“swiper”: “^9.2.0”

問題描述：

開啟loop：true后，第一個和最后一個echarts無法正常渲染

原因：

loop：true后swiper會在前后復制同樣的slide保證循環(huán)效果，初始化時使用的ID就不是唯一的了，導致echarts初始化無效了

解決方法：

// 通過class獲取dom，并在循環(huán)時初始化，為了保證echarts初始化時dom已經(jīng)更新渲染，加一個setTimeout函數(shù)
?setTimeout(() => {
? const myEchart = document.getElementsByClassName(classname);
? let chart = null;
? Array.prototype.forEach.call(myEchart, function (element, i, arr) {
? ? element.setAttribute("_echarts_instance_", "");
? ? chart = echarts.init(element);
? ? console.log(arr);
? ? chart.setOption(optionArr[i]);
? });
})

或者使用for (let i = 0; i < myEchart.length; i++) {}循環(huán)遍歷dom

注意：這里不是能用for (let i in myEchart) {}，否則會報錯如下：