如何解决如何通过第三方脚本导入正确调用js模块
我正在使用Barba.js进行很棒的页面过渡,而使用Swiper.js则是可爱的轮播。问题在于它使您的页面成为SPA,因此您必须重新init
脚本。告诉你真相很痛苦。
在我的 barba.js 文件中,我在顶部叫一个旋转式旋转木马
import barba from "@barba/core";
import { homeCarousel } from './swiper.js'
function initCarousel() {
if (document.querySelector('.swiper-container') != null) {
homeCarousel();
}
}
barba.init({
sync: true,preventRunning: true,views: [{
namespace: 'main',afterEnter() {
setTimeout(() => {
initCarousel();
},550);
}
}],transitions: [{
async leave() {
done();
},async enter() {
newPage();
},}]
})
然后在我的 swiper.js 文件中
import Swiper from 'swiper';
import 'swiper/css/swiper.css';
const homeCarousel = () => {
var hs = new Swiper('.home__carousel',{
init: false,});
hs.init();
}
homeCarousel();
export { homeCarousel }
这一切正常但我还有另一个没有轮播的页面,因此.swiper-container
将返回null。那也很好,但是因为要导入在barba.js的顶部
import { homeCarousel } from './swiper.js'
Cannot read property 'push' of undefined
更改路线后,不会出现可怕的控制台错误。
我想在理想的世界中,我会将这个import语句放在if (document.querySelector('.swiper-container') != null)
内,但是导入 have 是最高级的。
有什么建议吗?我正要通过PC离开窗口。可能是一件好事。
解决方法
在将swiper.js
用作库时,它应仅包含没有副作用的API。
在这种情况下,请从homeCarousel();
中删除swiper.js
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。