1

我正在尝试在我的简单 Swup ( https://github.com/swup/swup ) 站点上使用 Alpine ( https://github.com/alpinejs/alpine )。目前我正在尝试使用 Siema ( https://pawelgrzybek.github.io/siema/ ) 实现轮播。

在初始页面加载时，一切都按预期工作，但是当我从带有轮播的页面导航然后返回到它时，轮播无法正常工作。我认为这是由于轮播再次对其自身进行初始化，所以我相信我需要以某种方式销毁轮播。我可以访问 Swup 中的事件以在交换页面时进行更改，但我不确定如何将其与 Alpine 联系起来。

我可以就如何解决这个特定问题提供帮助，如果有人有任何关于如何使用 Swup 将 Alpine 组件添加到站点的更广泛信息，那就太好了，因为我需要添加一些进一步的组件（例如下拉菜单、模式）在这之后。

下面是我的代码：

HTML

<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>

脚本.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，Siema 应用了调整。这工作正常：

<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>

谢谢！

4

1 回答 1

0

我有同样的问题并发现了问题：

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

// 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();
于 2022-02-24T12:08:12.313 回答