vue3中使用swiper及遇到的问题解析

目录

• 一、安装swiper
• 二、使用swiper
• 三、echarts+swiper

一、安装swiper

使用npm install swiper安装swpier插件

npm install swiper -s // @9.2.0
// 或者安装指定版本
npm install [email protected] -s

二、使用swiper

直接按照官网的引用方法，项目会报错

解决方法：
引入的组件使用以下路径

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

有时还需要使用一些其他的组件API，如：

其中：

loop： 是否循环播放：true/false
direction：轮播方向"horizontal"/“vertical”，默认"horizontal"
slides-per-view：控制一次显示几张轮播图
space-between： 每张轮播图之间的距离，该属性不可以和margin 属性同时使用；

三、echarts+swiper

项目背景

需要在swiper的每个轮播项中展示并包含不同的echarts，且开启loop:true循环

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

问题描述：

开启loop：true后，第一个和最后一个echarts无法正常渲染

原因：

loop：true后swiper会在前后复制同样的slide保证循环效果，初始化时使用的ID就不是唯一的了，导致echarts初始化无效了

解决方法：

// 通过class获取dom，并在循环时初始化，为了保证echarts初始化时dom已经更新渲染，加一个setTimeout函数
 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++) {}循环遍历dom

注意：这里不是能用for (let i in myEchart) {}，否则会报错如下：

还有点击失效的问题可参考这里

到此这篇关于vue3中使用swiper及遇到的问题的文章就介绍到这了,更多相关vue3使用swiper内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！