文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue3中使用swiper遇到的问题怎么解决

2023-07-06 01:32

关注

这篇文章主要介绍了vue3中使用swiper遇到的问题怎么解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue3中使用swiper遇到的问题怎么解决文章都会有所收获,下面我们一起来看看吧。

一、安装swiper

使用npm install swiper安装swpier插件

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

二、使用swiper

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

vue3中使用swiper遇到的问题怎么解决

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

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: 方向箭头:向左,向右
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: 是否循环播放: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遇到的问题怎么解决”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“vue3中使用swiper遇到的问题怎么解决”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯