vue3中使用swiper遇到的問題如何解決

本篇內(nèi)容主要講解“vue3中使用swiper遇到的問題如何解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“vue3中使用swiper遇到的問題如何解決”吧!

一、安裝swiper

使用npm install swiper安裝swpier插件

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

二、使用swiper

直接按照官網(wǎng)的引用方法，項(xiàng)目會(huì)報(bào)錯(cuò)

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

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

有時(shí)還需要使用一些其他的組件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: 輪播小圓點(diǎn)
clickable: 如果為true，則單擊分頁按鈕將跳轉(zhuǎn)到對(duì)應(yīng)的slide。僅適用于項(xiàng)目符號(hào)分頁類型
*/
/* Scrollbar: 滾動(dòng)條
draggable: 設(shè)置為true可使?jié)L動(dòng)條可拖動(dòng)，從而控制滑塊位置
*/
/* AutoPlay: 自動(dòng)輪播
delay: 轉(zhuǎn)換之間的延遲（毫秒）。如果未指定此參數(shù)，將禁用自動(dòng)播放
disableOnInteraction：設(shè)置為false，用戶交互（滑動(dòng)）后自動(dòng)播放不會(huì)被禁用，每次交互后都會(huì)重新啟動(dòng)
pauseOnMouseEnter：?jiǎn)⒂煤?，指針（鼠?biāo)）在Swiper容器上輸入時(shí)將暫停自動(dòng)播放。
*/

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”，默認(rèn)"horizontal"
slides-per-view：控制一次顯示幾張輪播圖
space-between： 每張輪播圖之間的距離，該屬性不可以和margin 屬性同時(shí)使用；

三、echarts+swiper

項(xiàng)目背景

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

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

問題描述：

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

原因：

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

解決方法：

// 通過class獲取dom，并在循環(huán)時(shí)初始化，為了保證echarts初始化時(shí)dom已經(jīng)更新渲染，加一個(gè)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) {}，否則會(huì)報(bào)錯(cuò)如下：

到此，相信大家對(duì)“vue3中使用swiper遇到的問題如何解決”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！