Tworzenie komponentu Relacje

Podstawowe informacje o tym, jak stworzyć aplikację podobną do Instagrama w przeglądarce.

Adam Argyle

W tym poście chcę podzielić się pomysłami na tworzenie komponentu Relacje jest elastyczny, obsługuje nawigację za pomocą klawiatury i działa przeglądarki.

Demonstracja
.

Jeśli wolisz zobaczyć praktyczny pokaz tworzenia tego komponentu Relacji, zapoznaj się z ćwiczeniami z programowania dotyczącymi komponentów Relacje.

Jeśli wolisz film, oto wersja tego posta w YouTube:

Omówienie

Dwa popularne przykłady funkcji Relacje to Snapchat i Instagram (nie wspominając o flotach). Ogólnie rzecz biorąc, relacje są zazwyczaj dostosowane do urządzeń mobilnych i służą do klikania w nich wielu subskrypcji. Na przykład na Instagramie użytkownicy otwierają relację znajomego. i przeglądać zawarte w nim zdjęcia. Mają zwykle tyle znajomych – obecnie się znajdujesz. Gdy użytkownik kliknie prawą część urządzenia, użytkownik przeskoczy do w następnej kolejności. Gdy przesuniesz palcem w prawo, użytkownik przekieruje użytkownika do innego znajomego. Komponent Relacja jest dość podobny do karuzeli, ale umożliwia poruszanie się wielowymiarową tablicę zamiast jednowymiarowej tablicy. Wygląda to tak, jakby w środku była karuzela w każdej karuzeli. 🤯

Zwizualizowana wielowymiarowa tablica za pomocą kart. Od lewej do prawej znajduje się stos kart z fioletowymi obramowaniem, a w środku każdej z nich znajduje się 1 karta w obramowaniu turkusowym. Lista na liście.
Pierwsza karuzela znajomych
2 „na stos” karuzela relacji
👍 Lista na liście (inaczej: wielowymiarowa tablica)
.

Wybór odpowiednich narzędzi do konkretnego zadania

Ogólnie rzecz biorąc, tworzenie tego komponentu jest dość proste dzięki o kluczowych funkcjach platformy internetowej. Omówmy je!

Siatka CSS

Wygląda na to, że nasz układ nie jest zbyt obszerny dla siatki CSS, ponieważ zawiera potężne sposoby na tworzenie wrangle.

Układ Znajomi

Głównym kodem komponentu .stories jest widok przewijania w poziomie zoptymalizowany pod kątem urządzeń mobilnych:

.stories {
  inline-size: 100vw;
  block-size: 100vh;

  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}

/* desktop constraint */
@media (hover: hover) and (min-width: 480px) {
  max-inline-size: 480px;
  max-block-size: 848px;
}
.
Korzystanie z Narzędzi deweloperskich w Chrome Tryb urządzenia aby wyróżnić kolumny utworzone przez siatkę

Przyjrzyjmy się temu układowi grid:

  • Na urządzeniach mobilnych wyraźnie wypełniamy widoczny obszar reklamami 100vh i 100vw oraz ograniczamy rozmiar na komputerach.
  • Szablony wierszy i kolumn oddziela funkcja /
  • auto-flow odpowiada na grid-auto-flow: column
  • Szablon autoprzepływu to 100%, który w tym przypadku określa szerokość okna przewijania.
.

Na telefonie komórkowym wyobrażamy sobie, że rozmiar wiersza to wysokość widocznego obszaru to właśnie szerokość widocznego obszaru. Przejdźmy do relacji na Snapchacie i Na przykład w relacji na Instagramie każda kolumna zawiera historię znajomego. Chcemy mieć znajomych aby kontynuować poza widocznym obszarem, i przejść do miejsca, w którym można przewinąć widok. Siatka pozwala utworzyć dowolną liczbę kolumn potrzebnych do określenia układu HTML dla każdego znajomego tworząc w ten sposób dynamiczny i elastyczny kontener przewijania. Siatka udało nam się scentralizować ten efekt.

Kumulowanie

Musimy też być w stanie podzielić na strony historie każdego znajomego. Przygotowując się do animacji i innych zabawnych wzorców, wybrałem stos. Kiedy mówię „stos”, mam na myśli, że patrzysz na ekran niż patrzenie z boku na kanapkę.

Dzięki siatce CSS można zdefiniować siatkę jednokomórkową (tj. kwadrat), w której wiersze i kolumny mają ten sam alias ([story]), a każdy użytkownik podrzędny zostanie do niego przypisany spacja jednokomórkowa z aliasem:

.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.story {
  grid-area: story;
  background-size: cover;
  …
}

Dzięki temu nasz kod HTML kontroluje kolejność nakładania elementów i jednocześnie zachowuje wszystkie elementy fazy przepływu. Zwróć uwagę, że nie musieliśmy modyfikować pozycjonowania absolute ani z-index i nie musieliśmy poprawiać tekstu z użyciem wartości height: 100% lub width: 100%. Siatka nadrzędna ma już określony rozmiar widocznego obszaru obrazu w artykule, więc żaden z tych komponentów każdego zadania się!

Punkty przyciągania przewijania CSS

Zgodnie ze specyfikacją CSS Scroll Snap Points aby zablokować elementy w widocznym obszarze podczas przewijania. Zanim istniały te właściwości CSS, trzeba było używać JavaScriptu, co było... dość trudne. Wymelduj się Przedstawiamy punkty zaczepienia przewijania CSS przez Sarah Drasner, gdzie zamieściliśmy wyczerpujące wyjaśnienie, jak z nich korzystać.

Przewijanie poziome bez stylów scroll-snap-points i bez. W przeciwnym razie użytkownicy mogą normalnie przewijać. Dzięki niemu przeglądarka delikatnie przylega do każdego elementu.
element nadrzędny
.stories {
  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}
. Element nadrzędny z nadmiernym przewijaniem definiuje zachowanie przyciągania.
dziecko
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
. Dzieci postanawiają być szybkim celem.

Wybrałem Scroll Snap Points z kilku powodów:

  • Bezpłatne ułatwienia dostępu Informacje o specyfikacjach punktów przyciągania przewijanych powodują, że naciśnięcie przycisku Klawisze strzałki w lewo i strzałka w prawo powinny poruszać się między punktami przyciągania domyślnie.
  • Rosnąca specyfikacja. Specyfikacja Scroll Snap Points wprowadza nowe funkcje i ulepszenia przez cały czas, więc moje Relacje będą prawdopodobnie lepsze tutaj.
  • Łatwość implementacji. Przewijane punkty przyciągania są praktycznie przeznaczone przypadku użycia funkcji podziału na strony w poziomie ukierunkowanym na dotyk.
  • Bezwładność swobodna w stylu platformy. Każda platforma przewija się i spoczywa w swoim stylu, znormalizowana bezwładność, która może mieć niesamowite przewijanie i styl spoczynku.

Zgodność z różnymi przeglądarkami

Przetestowaliśmy je w przeglądarkach Opera, Firefox, Safari i Chrome oraz na Androidzie i iOS. Oto krótkie podsumowanie funkcji sieciowych, w których zauważyliśmy różnice w możliwościach i obsłudze.

Mieliśmy jednak część usług porównywania cen, które nie stosujemy, więc niektóre platformy nie wykorzystują jeszcze UX i optymalizacji. Podobało mi się, że nie musiałem zarządzać tymi funkcjami, i czuję się pewnie a także na inne przeglądarki i platformy.

scroll-snap-stop

Karuzele były jednym z głównych zastosowań UX, które skłoniły do stworzenia Specyfikacja punktów przyciągania CSS Scroll. W przeciwieństwie do relacji karuzela nie zawsze musi się zatrzymać na każdym obrazie po interakcji użytkownika z nim. Może być dozwolone, jeśli szybko poruszać się po karuzeli. Z kolei artykuły najlepiej poruszać się po kolei, I właśnie to umożliwia scroll-snap-stop.

.user {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

W momencie pisania tego posta aplikacja scroll-snap-stop jest obsługiwana tylko w przeglądarce Chromium przeglądarki. Wymelduj się Zgodność z przeglądarką . Nie jest to jednak blokada. Oznacza tylko, że w nieobsługiwanych przeglądarkach Użytkownik może przypadkowo pominąć znajomego. Użytkownicy będą po prostu bardziej ostrożni. należy napisać kod JavaScript, aby mieć pewność, że pominięty znajomy nie jest oznaczony jako wyświetlany.

Więcej informacji znajdziesz w spec, jeśli zainteresowanym.

overscroll-behavior

Czy kiedykolwiek zdarzyło Ci się przewijać okno modalne, gdy nagle rozpocząć przewijanie zawartości sekcji? overscroll-behavior sprawia, że programistka „blokuje” przewijanie i nigdy wyjdź z domu. sprawdza się na każdą okazję. Używa go komponent Moje relacje aby kolejne przesuwania i gesty przewijania nie opuszczały .

.stories {
  overflow-x: auto;
  overscroll-behavior: contain;
}

Safari i Opera to dwie przeglądarki, które nie obsługują to. Całkowicie w porządku. Tacy użytkownicy zostaną przeniesieni dookoła. i może nigdy nie zauważyć takiego ulepszenia. Jestem wielkim fanem i lubię Uwzględniliśmy go w prawie każdej funkcji przesuwania w górę, którą wdrażam. To nieszkodliwe dodanie, które może tylko poprawić wrażenia użytkowników.

scrollIntoView({behavior: 'smooth'})

Gdy użytkownik kliknie reklamę i dotrze do końca zestawu opowieści znajomego, czas przejść do następnego znajomego w ustawianym punkcie przewijania. Na JavaScript, udało nam się odwołać do następnego znajomego i poprosić o przewinięto do widoku. Podstawowe informacje są przydatne. w każdej przeglądarce przewinął go do widoku. Jednak nie każda przeglądarka tak działa 'smooth'. Oznacza to tylko została przewinięta do widoku, a nie przyciągnięta.

element.scrollIntoView({
  behavior: 'smooth'
})

Jedyną przeglądarką, która nie obsługiwała języka behavior: 'smooth', była Safari. Wymelduj się Zgodność z przeglądarką .

Nauka praktyczna

Skoro już wiesz, jak to robię, jak Ty?! Zadbajmy o zróżnicowanie i poznaj wszystkie sposoby budowania obecności w internecie. Utwórz usterkę, wyślij mi wiadomość na Twitterze, a dodam ją do znajdziesz poniżej w sekcji Remiksy społeczności.

Remiksy utworzone przez społeczność