Codelab：构建故事组件

Adam Argyle

此 Codelab 将教您如何在 Web 上构建类似 Instagram 短片故事的体验。我们将逐步构建该组件，首先是 HTML，然后是 CSS，最后是 JavaScript。

请参阅我的博文构建短片故事组件，了解在构建此组件时所做的渐进式增强。

设置

  1. 点击 Remix to Edit 即可修改项目。
  2. 打开 app/index.html。

HTML

我始终致力于使用语义 HTML。由于每个好友可以有任意数量的故事，因此我认为为每个好友使用 <section> 元素，为每个故事使用 <article> 元素是有意义的。不过，我们还是从头开始吧。首先，我们需要为 stories 组件创建一个容器。

将 <div> 元素添加到 <body>：

<div class="stories">

</div>

添加一些 <section> 元素来表示好友：

<div class="stories">
  <section class="user"></section>
  <section class="user"></section>
  <section class="user"></section>
  <section class="user"></section>
</div>

添加一些 <article> 元素来表示故事：

<div class="stories">
  <section class="user">
    <article class="story" style="--bg: url(https://picsum.photos/480/840);"></article>
    <article class="story" style="--bg: url(https://picsum.photos/480/841);"></article>
  </section>
  <section class="user">
    <article class="story" style="--bg: url(https://picsum.photos/481/840);"></article>
  </section>
  <section class="user">
    <article class="story" style="--bg: url(https://picsum.photos/481/841);"></article>
  </section>
  <section class="user">
    <article class="story" style="--bg: url(https://picsum.photos/482/840);"></article>
    <article class="story" style="--bg: url(https://picsum.photos/482/843);"></article>
    <article class="story" style="--bg: url(https://picsum.photos/482/844);"></article>
  </section>
</div>
  • 我们将使用图片服务 (picsum.com) 来帮助制作故事原型。
  • 每个 <article> 上的 style 属性是占位符加载技术的一部分，您将在下一部分中详细了解该技术。

CSS

我们的内容已经可以设置样式了。我们来将这些骨架转变为人们想要与之互动的内容。今天，我们将以移动设备为先。

.stories

对于 <div class="stories"> 容器，我们需要一个水平滚动容器。 我们可以通过以下方式实现这一目标：

  • 将容器设为网格
  • 将每个子项设置为填充行轨道
  • 将每个子项的宽度设为移动设备视口的宽度

网格将继续在前一列的右侧放置新的 100vw 宽列，直到将所有 HTML 元素放置在标记中。

Chrome 和 DevTools 打开后，网格视觉效果会显示全宽布局
Chrome 开发者工具，显示网格列溢出，形成横向滚动条。

将以下 CSS 添加到 app/css/index.css 的底部：

.stories {
  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;
}

现在，我们已经让内容超出了视口，接下来需要告诉该容器如何处理这些内容。将突出显示的代码行添加到您的 .stories 规则集中：

.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;
}

我们希望实现水平滚动，因此将 overflow-x 设置为 auto。当用户滚动时，我们希望该组件轻轻地停靠在下一个故事上，因此我们将使用 scroll-snap-type: x mandatory。如需详细了解此 CSS，请参阅我博文中的 CSS 滚动贴靠点和 overscroll-behavior 部分。

父级容器和子项都需要同意滚动捕获，因此我们现在就来处理这个问题。将以下代码添加到 app/css/index.css 的底部：

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

您的应用尚不运行，但下方视频展示了启用和停用 scroll-snap-type 时会发生的情况。启用后，每次水平滚动都会跳转到下一个短片故事。停用后，浏览器将使用其默认滚动行为。

这样您就可以滚动浏览好友了，但我们仍需要解决与短片故事相关的问题。

.user

我们在 .user 部分创建一个布局，将这些子故事元素整理到位。我们将使用一个方便的堆叠技巧来解决这个问题。 我们本质上是在创建一个 1x1 网格，其中行和列具有相同的网格别名 [story]，并且每个故事版块项都将尝试声明该空间，从而形成一个堆叠。

将突出显示的代码添加到您的 .user 规则集中：

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

将以下规则集添加到 app/css/index.css 的底部：

.story {
  grid-area: story;
}

现在，我们没有使用绝对定位、浮动或其他将元素移出流的布局指令，但元素仍然在流中。此外，几乎不需要任何代码，您看！视频和博文中对此进行了更详细的说明。

.story

现在，我们只需为故事内容本身设置样式即可。

我们之前提到，每个 <article> 元素上的 style 属性是占位符加载技术的一部分：

<article class="story" style="--bg: url(https://picsum.photos/480/840);"></article>

我们将使用 CSS 的 background-image 属性，该属性允许我们指定多个背景图片。我们可以对它们进行排序，以便用户图片位于顶部，并在加载完成后自动显示。为此，我们将图片网址放入自定义属性 (--bg) 中，并在 CSS 中使用该属性与加载占位符叠加。

首先，我们来更新 .story 规则集，以便在渐变色加载完毕后将其替换为背景图片。将突出显示的代码添加到您的 .story 规则集中：

.story {
  grid-area: story;

  background-size: cover;
  background-image:
    var(--bg),
    linear-gradient(to top, lch(98 0 0), lch(90 0 0));
}

将 background-size 设置为 cover 可确保视口中没有空白，因为我们的图片将填满视口。通过定义 2 张背景图片，我们可以使用一个名为加载墓碑的巧妙 CSS Web 技巧：

  • 背景图片 1 (var(--bg)) 是我们在 HTML 中内嵌传递的网址
  • 背景图片 2（linear-gradient(to top, lch(98 0 0), lch(90 0 0)) 是网址加载期间显示的渐变

图片下载完毕后，CSS 会自动将渐变色替换为图片。

接下来，我们将添加一些 CSS 来移除一些行为，让浏览器能够更快地运行。 将突出显示的代码添加到您的 .story 规则集中：

.story {
  grid-area: story;

  background-size: cover;
  background-image:
    var(--bg),
    linear-gradient(to top, lch(98 0 0), lch(90 0 0));

  user-select: none;
  touch-action: manipulation;
}
  • user-select: none 可防止用户意外选择文本
  • touch-action: manipulation 会指示浏览器将这些互动视为触摸事件，从而使浏览器无需尝试确定您是否点击了网址

最后，我们来添加一些 CSS 代码，为故事之间的转场添加动画效果。将突出显示的代码添加到您的 .story 规则集中：

.story {
  grid-area: story;

  background-size: cover;
  background-image:
    var(--bg),
    linear-gradient(to top, lch(98 0 0), lch(90 0 0));

  user-select: none;
  touch-action: manipulation;

  transition: opacity .3s cubic-bezier(0.4, 0.0, 1, 1);

  &.seen {
    opacity: 0;
    pointer-events: none;
  }
}

系统会将 .seen 类添加到需要退出的故事中。我从 Material Design 的缓动指南（滚动到加速缓动部分）中获取了自定义缓动函数 (cubic-bezier(0.4, 0.0, 1,1))。

如果您目光敏锐，可能已经注意到了 pointer-events: none 声明，并感到困惑。我认为这是该解决方案目前唯一的缺点。我们需要这样做，因为 .seen.story 元素将位于顶部并会接收点按，即使它不可见也是如此。通过将 pointer-events 设置为 none，我们将玻璃故事变成了一个窗口，不会再盗用用户互动。这不失为一种折衷方案，目前在 CSS 中管理起来也不太难。我们不会同时处理 z-index。我对此仍有信心。

JavaScript

用户可以非常简单地与短片故事组件互动：点按右侧可向前跳转，点按左侧可返回。对用户来说简单的事情，对开发者来说往往是一件难事。不过，我们会处理很多问题。

设置

首先，我们来计算并存储尽可能多的信息。 将以下代码添加到 app/js/index.js：

const stories = document.querySelector('.stories')
const median = stories.offsetLeft + (stories.clientWidth / 2)

JavaScript 的第一行代码会抓取并存储对主要 HTML 元素根的引用。下一行代码会计算元素的中间位置，以便我们确定点按是向前还是向后。

州

接下来，我们创建一个包含与逻辑相关的状态的小对象。在本例中，我们只关注当前的故事。在 HTML 标记中，我们可以通过抓取第 1 位好友及其最新故事来访问它。将突出显示的代码添加到 app/js/index.js：

const stories = document.querySelector('.stories')
const median = stories.offsetLeft + (stories.clientWidth / 2)

const state = {
  current_story: stories.firstElementChild.lastElementChild
}

监听器

现在，我们已经有了足够的逻辑来开始监听用户事件并进行引导。

鼠标

我们先从监听短片故事容器上的 'click' 事件开始。 将突出显示的代码添加到 app/js/index.js：

const stories = document.querySelector('.stories')
const median = stories.offsetLeft + (stories.clientWidth / 2)

const state = {
  current_story: stories.firstElementChild.lastElementChild
}

stories.addEventListener('click', e => {
  if (e.target.nodeName !== 'ARTICLE')
    return

  navigateStories(
    e.clientX > median
      ? 'next'
      : 'prev')
})

如果发生点击，但点击的不是 <article> 元素，我们会退出并不执行任何操作。如果是文章，我们会使用 clientX 获取鼠标或手指的水平位置。我们尚未实现 navigateStories，但它接受的实参指定了我们需要前往的方向。如果该用户位置大于中位数，我们就知道需要导航到 next，否则则导航到 prev（上一个）。

键盘

现在，我们来监听键盘按键。如果按下向下箭头，我们会导航到 next。如果是向上箭头，则转到 prev。

将突出显示的代码添加到 app/js/index.js：

const stories = document.querySelector('.stories')
const median = stories.offsetLeft + (stories.clientWidth / 2)

const state = {
  current_story: stories.firstElementChild.lastElementChild
}

stories.addEventListener('click', e => {
  if (e.target.nodeName !== 'ARTICLE')
    return

  navigateStories(
    e.clientX > median
      ? 'next'
      : 'prev')
})

document.addEventListener('keydown', ({key}) => {
  if (key !== 'ArrowDown' || key !== 'ArrowUp')
    navigateStories(
      key === 'ArrowDown'
        ? 'next'
        : 'prev')
})

短片故事导航

现在，我们来探讨短片故事的独特业务逻辑以及它们广为人知的用户体验。这看起来很复杂，但我认为，如果您逐行阅读，就会发现它很容易理解。

首先，我们会隐藏一些选择器，以帮助我们决定是滚动到好友还是显示/隐藏故事。由于我们要处理的是 HTML，因此我们将查询 HTML 中是否存在好友（用户）或故事（故事）。

这些变量有助于我们回答诸如“在故事 x 中，‘下一步’是指转到同一好友的另一个故事，还是转到其他好友的故事？”之类的问题。我使用我们构建的树形结构来实现这一点，深入到父级和子级。

将以下代码添加到 app/js/index.js 的底部：

const navigateStories = direction => {
  const story = state.current_story
  const lastItemInUserStory = story.parentNode.firstElementChild
  const firstItemInUserStory = story.parentNode.lastElementChild
  const hasNextUserStory = story.parentElement.nextElementSibling
  const hasPrevUserStory = story.parentElement.previousElementSibling
}

下面是我们的业务逻辑目标，尽可能接近自然语言：

  • 确定如何处理点按操作
    • 如果有下一个/上一个故事：显示该故事
    • 如果是好友的最后/第一个故事：显示新好友
    • 如果没有相应方向的故事：不执行任何操作
  • 将新的当前故事存入 state

将突出显示的代码添加到 navigateStories 函数中：

const navigateStories = direction => {
  const story = state.current_story
  const lastItemInUserStory = story.parentNode.firstElementChild
  const firstItemInUserStory = story.parentNode.lastElementChild
  const hasNextUserStory = story.parentElement.nextElementSibling
  const hasPrevUserStory = story.parentElement.previousElementSibling

  if (direction === 'next') {
    if (lastItemInUserStory === story && !hasNextUserStory)
      return
    else if (lastItemInUserStory === story && hasNextUserStory) {
      state.current_story = story.parentElement.nextElementSibling.lastElementChild
      story.parentElement.nextElementSibling.scrollIntoView({
        behavior: 'smooth'
      })
    }
    else {
      story.classList.add('seen')
      state.current_story = story.previousElementSibling
    }
  }
  else if(direction === 'prev') {
    if (firstItemInUserStory === story && !hasPrevUserStory)
      return
    else if (firstItemInUserStory === story && hasPrevUserStory) {
      state.current_story = story.parentElement.previousElementSibling.firstElementChild
      story.parentElement.previousElementSibling.scrollIntoView({
        behavior: 'smooth'
      })
    }
    else {
      story.nextElementSibling.classList.remove('seen')
      state.current_story = story.nextElementSibling
    }
  }
}

试试看

  • 如需预览网站，请按 View App（查看应用）。然后按 Fullscreen（全屏）全屏。

总结

以上就是我对该组件的需求总结。您可以随意在此基础上进行构建，利用数据来推动其发展，并将其视为自己的工具！