Svelte: как получить больше, если пользователь прокрутил страницу до конца - PullRequest
Новая
       72

Svelte: как получить больше, если пользователь прокрутил страницу до конца

0 голосов
/ 28 февраля 2020

У меня есть компонент, который выбирает сообщения с сервера GraphQL. Он должен получать больше сообщений, если пользователь находится внизу страницы. Как я могу проверить, достиг ли он этого? Я смотрел на clientHeight, innerHeight и outerHeight, но только clientHeight имел смысл работать с ними. Наверное, я должен кое-что вычесть из этого, но я не знаю, что именно и чего мне не хватает? 

<script>
    import {getClient, query} from 'svelte-apollo';
    import ContentWrapper from '../layout/ContentWrapper.svelte';
    import {GET_POSTS} from "../services/posts/postsApi";

    let pageInfo;
    let first = 2;
    let after;

    const client = getClient();
    let posts = query(client, {query: GET_POSTS, variables: {first}});

    const fetchMore = () => {
        posts.fetchMore({
            variables: {first, after},
            updateQuery: (previousResult, {fetchMoreResult}) => {
                const newEdges = fetchMoreResult.getPosts.edges;
                const pageInfo = fetchMoreResult.getPosts.pageInfo;

                return newEdges.length
                        ? {
                            getPosts: {
                                __typename: previousResult.getPosts.__typename,
                                edges: [...previousResult.getPosts.edges, ...newEdges],
                                pageInfo
                            }
                        }
                        : previousResult;
            }
        })
    };

    const setState = queryData => {
        pageInfo = queryData.getPosts.pageInfo;
        after = pageInfo.endCursor;
        return '';
    };

    let y;
    let clientHeight;

    const checkScrollPosition = () => {
        if(clientHeight <= y)
            fetchMore();
    }
</script>

<svelte:window on:scroll={checkScrollPosition} bind:scrollY={y} />

<ContentWrapper>
    <div slot="header">
        <h4>Page of Pagination</h4>
    </div>
    <div slot="body" bind:clientHeight={clientHeight}>
        {#await $posts}
            <h3>Loading...</h3>
        {:then result}
            {setState(result.data)}
            {#each result.data.getPosts.edges as post}
                <div class="card">
                    <div class="card-content">
                        <p class="card-text">{post.node.body}</p>
                    </div>
                </div>
            {/each}
            <div id="paginator">
                {#if pageInfo}
                    {#if pageInfo.hasNextPage}
                        <div class="btn" on:click={fetchMore}>Next</div>
                    {/if}
                {/if}
            </div>
        {:catch error}
            {console.log(error)}
        {/await}
    </div>
</ContentWrapper>

1 Ответ

0 голосов
/ 09 марта 2020

Наблюдатель перекрестков - это то, что вы ищете в вопросе. Технология поддерживается всеми современными браузерами. С его помощью вы можете узнать, является ли какой-либо элемент видимым на экране, и после этого получить больше элементов.

Вы можете взглянуть на реализацию компонента Svelte IntersectionObserver прямо здесь: it использует обе технологии по старинке с window.innerHeight

...