Question

Sapper中一个页面的脚本标记中导入的库（ScrollMagic）的实例，该实例在导航到其他页面时保持存在。

我尝试在ondestroy内销毁它，但我无法引用引用该实例的变量（已创建wihtin oncreate）。

如何将脚本标记范围限定为单个页面，或者在离开页面时销毁实例？

Answer 1

您可以通过两种方式访问ondestroy中oncreate中创建的内容。第一种是将它们添加为组件的属性：

<script>
  import ScrollMagic from 'scrollmagic';

  export default {
    oncreate() {
      this.controller = new ScrollMagic.Controller(...);
      this.scene = new ScrollMagic.Scene(...);
    },

    ondestroy() {
      this.controller.destroy();
      this.scene.destroy();
    }
  };
</script>

第二种是使用this.on("destroy", ...)形式：

<script>
  import ScrollMagic from 'scrollmagic';

  export default {
    oncreate() {
      const controller = new ScrollMagic.Controller(...);
      const scene = new ScrollMagic.Scene(...);

      this.on('destroy', () => {
        controller.destroy();
        scene.destroy();
      });
    }
  };
</script>

如何在Svelte / Sapper中为各个页面确定脚本标记范围？

1 个答案: