1

解决swiper组件autoplay报错问题 - 乔木滴滴

 2 years ago
source link: https://www.cnblogs.com/qiaomucreate/p/16703771.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

最近在自定义一个swiper 插件 发现引用之后不定时一直在报错

Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')

一个undefined一直被监听事件而且有时候有有时候没有在后续过程中不定时的报错很苦恼

具体错误:

2969767-20220917221737124-1129439165.png

看了一下是swiper 的autoplay 文件有问题 而且这个问题只要页面一离开就会报错 

解决方法(改源码的小方法)

1. 到node_modules文件中找到自己下载的swiper  文件

2969767-20220917222454032-1456637553.png

2. 我引入的文件是swiper/bundle 文件 

// 引入库
import Swiper from "swiper/bundle";

3. 当然你可以去找到swiper 的package.json文件找到你引入的地址对应的文件(如果你直接引入就是那个主文件main)

2969767-20220917222921619-1694328009.png

4.然后到swiper-bundle.esm.js文件找到那个出问题的包modules/autoplay/autoplay.js

2969767-20220917223321094-2025689063.png

5.然后vscode 可以直接按住ctrl 点击就能进入文件里面

6.查找浏览器报错代码

2969767-20220917223842198-868151952.png

7.然后ctrl + f 查找一下 报错的代码swiper.$wrapperEl[0].addEventListener(event, onTransitionEnd

2969767-20220917224000663-1677309548.png

8.打印一下这个被监听的元素  发现不定时找不到这个元素

2969767-20220917224640790-1337044002.png
2969767-20220917224703687-1349645757.png

9.解决办法在元素前面加个?来判断一下 如果前面为假就不执行了

2969767-20220917225350448-1630246897.png

就不报错了

2969767-20220917225420501-934613407.png

当然如果你有更好的办法请一定告诉我!!!


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK