如何使用Swup将AlpineJS集成到网站中

Question

我试图在我的简单Swup (https://github.com/alpinejs/alpine)站点上使用阿尔卑斯山(https://github.com/swup/swup)。目前，我正试图使用Siema (https://pawelgrzybek.github.io/siema/)实现一个旋转木马。

在最初的页面加载中，一切都按预期的方式工作，但是当我使用旋转木马离开页面，然后返回到它时，旋转木马就不能正常工作了。我认为这是因为旋转木马再次被初始化，所以我认为我需要以某种方式摧毁旋转木马。我可以访问Swup中的事件，以便在交换页面时进行更改，但我不知道如何将其与阿尔卑斯山联系起来。

我可以帮助如何解决这个特定的问题，如果有人有任何更广泛的信息，如何添加阿尔卑斯组件到一个网站使用Swup，这将是很好的，因为我需要添加一些更多的组件(例如下拉，调制解调器)之后。

下面是我的代码：

<div class="container p-4 mx-auto" x-data="carousel({selector:'.carousel1'})">
  <div class="carousel1">
    <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 1</div>
    <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 2</div>
    <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 3</div>
    <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 4</div>
  </div>
</div>

scripts.js

// Swup for page transitions - https://swup.js.org/
import Swup from 'swup';

// Scrollreveal for scrolling animations - https://scrollrevealjs.org/
import ScrollReveal from 'scrollreveal';

// Alpine - https://alpinejs.dev
import Alpine from 'alpinejs'
 
window.Alpine = Alpine

import carousel from './modules/_carousel.js';
Alpine.data('carousel', carousel);
Alpine.start();


function init() {
  ScrollReveal().reveal('.headline', { duration: 1000, delay:500, viewFactor: 1 });
}

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

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

init();

_carousel.js

import Siema from 'siema';

export default ({selector}) => ({
    carousel: new Siema({ 
        selector: selector
    })
})

这是HTML，当我做第一个页面加载，与调整应用的西马。这样做很好：

<div class="container p-4 mx-auto" x-data="carousel({selector:'.carousel1'})">
  <div class="carousel1" style="overflow: hidden; direction: ltr;">
    <div style="width: 4992px; transition: all 200ms ease-out 0s; transform: translate3d(0px, 0px, 0px);">
      <div style="float: left; width: 25%;">
        <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 1</div>
      </div>
      <div style="float: left; width: 25%;">
        <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 2</div>
      </div>
      <div style="float: left; width: 25%;">
        <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 3</div>
      </div>
      <div style="float: left; width: 25%;">
        <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 4</div>
      </div>
    </div>
  </div>
</div>

这是在我导航到另一个页面然后返回到旋转木马页面之后的HTML。这不管用：

<div class="container p-4 mx-auto" x-data="carousel({selector:'.carousel1'})">
  <div class="carousel1" style="overflow: hidden; direction: ltr;">
    <div style="width: 1248px; transition: all 200ms ease-out 0s; transform: translate3d(0px, 0px, 0px);">
      <div style="float: left; width: 100%;">
        <div style="width: 4992px; transition: all 200ms ease-out 0s; transform: translate3d(0px, 0px, 0px);">
          <div style="float: left; width: 25%;">
            <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 1</div>
          </div>
          <div style="float: left; width: 25%;">
            <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 2</div>
          </div>
          <div style="float: left; width: 25%;">
            <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 3</div>
          </div>
          <div style="float: left; width: 25%;">
            <div class="p-4 mb-3 rounded bg-grey-100">Hi, I'm slide 4</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

谢谢!

Answer 1

我有了同一问题，发现了这个问题：

您的脚本不工作，因为您在初始化Swup之前启动了高山。应该在任何其他更改DOM之前初始化Swup，如下所示：

// Swup for page transitions - https://swup.js.org/
import Swup from 'swup';

// Scrollreveal for scrolling animations - https://scrollrevealjs.org/
import ScrollReveal from 'scrollreveal';

// Alpine - https://alpinejs.dev
import Alpine from 'alpinejs'
import carousel from './modules/_carousel.js';


function init() {
  ScrollReveal().reveal('.headline', { duration: 1000, delay:500, viewFactor: 1 });
}

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

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

// Start Alpine *after* initializing Swup and anything will work as expected:
window.Alpine = Alpine
Alpine.data('carousel', carousel);
Alpine.start();

init();