Flickity & Swup - 破坏flickity

Question

我试图在使用 Swup 进行页面转换时销毁并重新加载我的 Flickity 幻灯片，但运气不佳。这是我的 js 文件：

import Swup from 'swup';

var Flickity = require('flickity');

function init() {
  if (document.querySelector('.testimonials-slideshow')) {
    var flkty = new Flickity('.testimonials-slideshow', {
      wrapAround: true,
      pageDots: false,
      autoPlay: true,
      arrowShape: 'M68.374,83.866L31.902,50L68.374,16.134L64.814,12.3L24.214,50L64.814,87.7L68.374,83.866Z'
    });
  }
}

function unload() {
  flkty.destroy();
}

init();

const swup = new Swup();

swup.on('contentReplaced', init);

swup.on('willReplaceContent', unload);

但是当我尝试这个时，我得到了错误 flkty is not defined。任何人都可以给我任何指示吗？

Answer 1

变量作用域

正如 CBroe 所提到的，您的 var 未定义，因为您定义它的位置。它是在函数中定义的，但应该在“顶层”定义。

import Swup from 'swup';

var Flickity = require('flickity');

// Added a "global" definition here:
var flkty;

function init() {
  if (document.querySelector('.testimonials-slideshow')) {
    // Removed var:
    flkty = new Flickity('.testimonials-slideshow', {
      wrapAround: true,
      pageDots: false,
      autoPlay: true,
      arrowShape: 'M68.374,83.866L31.902,50L68.374,16.134L64.814,12.3L24.214,50L64.814,87.7L68.374,83.866Z'
    });
  }
}

function unload() {
  flkty.destroy();
}

init();

const swup = new Swup();

swup.on('contentReplaced', init);

swup.on('willReplaceContent', unload);

此外，如果您使用任何类型的模块捆绑器，有时它仍然会丢失，因此您可以考虑做类似的事情：

window.flkty = new Flickity('.testimonials-slideshow', ...

并始终以这种方式引用它，即

window.flkty.destroy();

只销毁存在的实例

这就是您的变量定义。下一个潜在的错误是您仅在查询选择器匹配时初始化 flkty：

if (document.querySelector('.testimonials-slideshow')) {

但是你每隔 willReplaceContent 销毁它，所以你真的可以检查“它是否已启动，此页面已加载？”。在这种情况下，您可以像这样进行检查：

// Init the var as false:
var flkty = false

function init() {
  if (document.querySelector('.testimonials-slideshow')) {
    flkty = new Flickity('.testimonials-slideshow', ...);
  }
}

function unload() {
  if(flkty){
    flkty.destroy();
    // Make sure the flkty var is set to false at the end:
    flkty = false;
  }
}

整理你的代码

这一切都会变得有点失控，所以我们开始做的是创建模块。这是我们使用的轮播模块的框架：

// modules/Carousel.js
import Swiper from "swiper";

export default {
  carouselEl: null,
  carouselSwiper: null,
  setup() {
    this.carouselEl = document.getElementById("header-carousel");
    if (!this.carouselEl) {
      // Just stop if there is no carousel on this page
      return;
    }
    this.carouselSwiper = new Swiper(this.carouselEl, { ... });
    this.carouselSwiper.on("slideChange", () => { ... });
  },
  destroy() {
    // If we already have one:
    if (this.carouselSwiper) {
      this.carouselSwiper.destroy();
    }
    // Make sure we are reset, ready for next time:
    this.carouselSwiper = null;
  },
};

然后，在我们的 main.js 中，我们会像您一样做一些事情：

import Carousel from "./modules/Carousel.js";

function init(){
  Carousel.setup();
  // Add more here as the project grows...
}
function unload(){
  Carousel.unload();
}

swup = new Swup();
swup.on("contentReplaced", init);
swup.on("willReplaceContent", unload);
init();

所有模块都有 setup 和 unload 函数，如果元素不存在则不会中断，因此我们可以在每个页面加载和卸载时调用所有这些函数。

我喜欢 swup，但在初始化和销毁事物的噩梦中也有亲身经历，所以如果您需要任何进一步的帮助，请告诉我。

Flickity & Swup - 破坏flickity

Flickity & Swup - destroying flickity

javascript

flickity

swup

变量作用域

只销毁存在的实例

整理你的代码