在 Svelte 中加载更多按钮
Load more button in Svelte
我正在探索 Svelte,它很棒。但是我有一个问题,更多的是一个问题。我正在尝试实现一个简单的加载更多按钮,这是我的代码:
<script>
import { onMount } from "svelte";
let data = [];
onMount(async () => {
const res = await fetch(`./past-reza.json`);
data = await res.json();
});
let currentItems = 2;
loadmore.addEventListener('click', (e) => {
const elementList = [...document.querySelectorAll('.list-element')];
for (let i = currentItems; i < currentItems + 2; i++) {
if (elementList[i]) {
elementList[i].style.display = 'block';
}
}
currentItems += 2;
if (currentItems >= elementList.length) {
event.target.style.display = 'none';
}
})
</script>
我的 HTML 部分如下所示:
{#each data as item}
<div class="list-element">
<h2>{item.title}</h2>
</div>
{/each}
并加载更多按钮
<button
id="loadmore"
type="button"
class="btn btn-secondary">
Show more
</button>
问题是我为 load more
添加的这部分 JS 代码没有显示我的内容。
有人可以帮我解决这个问题吗?
您可以在此处使用更多 svelte
,例如:
<script>
import { onMount } from "svelte";
let data = []
onMount(async () => {
const res = await Promise.resolve({ json: () => [1,2,3,4,5,6,7,8,9,10] });
data = await res.json();
});
let currentItems = 2;
</script>
{#each data.slice(0, currentItems) as item}
<div class="list-element">
<h2>{item}</h2>
</div>
{/each}
{#if currentItems < data.length}
<button
on:click={() => currentItems = currentItems + 2}
id="loadmore"
type="button"
class="btn btn-secondary">
Show more
</button>
{/if}
https://svelte.dev/repl/5823b6e8a30447c59ce5b770f8a84593?version=3.31.2
我正在探索 Svelte,它很棒。但是我有一个问题,更多的是一个问题。我正在尝试实现一个简单的加载更多按钮,这是我的代码:
<script>
import { onMount } from "svelte";
let data = [];
onMount(async () => {
const res = await fetch(`./past-reza.json`);
data = await res.json();
});
let currentItems = 2;
loadmore.addEventListener('click', (e) => {
const elementList = [...document.querySelectorAll('.list-element')];
for (let i = currentItems; i < currentItems + 2; i++) {
if (elementList[i]) {
elementList[i].style.display = 'block';
}
}
currentItems += 2;
if (currentItems >= elementList.length) {
event.target.style.display = 'none';
}
})
</script>
我的 HTML 部分如下所示:
{#each data as item}
<div class="list-element">
<h2>{item.title}</h2>
</div>
{/each}
并加载更多按钮
<button
id="loadmore"
type="button"
class="btn btn-secondary">
Show more
</button>
问题是我为 load more
添加的这部分 JS 代码没有显示我的内容。
有人可以帮我解决这个问题吗?
您可以在此处使用更多 svelte
,例如:
<script>
import { onMount } from "svelte";
let data = []
onMount(async () => {
const res = await Promise.resolve({ json: () => [1,2,3,4,5,6,7,8,9,10] });
data = await res.json();
});
let currentItems = 2;
</script>
{#each data.slice(0, currentItems) as item}
<div class="list-element">
<h2>{item}</h2>
</div>
{/each}
{#if currentItems < data.length}
<button
on:click={() => currentItems = currentItems + 2}
id="loadmore"
type="button"
class="btn btn-secondary">
Show more
</button>
{/if}
https://svelte.dev/repl/5823b6e8a30447c59ce5b770f8a84593?version=3.31.2