如何创建可滑动的日历/日期选择器，动态添加上个月和下个月

Question

我正在为我的网络应用程序开发日历组件，并且真的很难允许滑动月份。

我创建了一个

CalendarMonth

组件，它需要

month

和

year

属性来渲染所有正确的日期，这样这部分就完成了。现在我只需要能够动态创建这些 CalendarMonths，以便用户可以在移动设备上左右滑动来浏览它们。

这是一个 REPL，其中包含我所拥有的精简版本： https://svelte.dev/repl/7626cce5508d4a73a6fe9d851e54d79a?version=4.2.0

我想一次显示一个日历，然后向左/向右滑动即可转到上一个/下一个日历。

我尝试使用 Swiper.js 来做到这一点，并尝试了他们的“虚拟幻灯片”模块，但我似乎也无法使其工作，所以不确定这是否是正确的路径。也许根本不需要 Swiper？我洗耳恭听如何解决这个问题！

Answer 1

这是一个与 this 类似的问题。 您可以使用

{#key value} {/key}

。请参阅教程中的此示例。对于您的情况，您可能需要类似以下内容：

<script>
  import dayjs from "dayjs";
  import CalendarMonth from "./CalendarMonth.svelte";

  let today = dayjs();
  $: month = today.format("MMMM");
  $: year = today.format("YYYY");

  function nextMonth() {
    today = today.add(1, "month");
  }

  function prevMonth() {
    today = today.subtract(1, "month");
  }
</script>

<button on:click={prevMonth}>Previous</button>
<button on:click={nextMonth}>Next</button>

{#key today}
  <CalendarMonth {month} {year} />
{/key}