在一个页面中有多个 snap-drawes 和 snap-contents

Question

我在一个页面中有一个电影列表，我想添加向左滑动显示电影时间，向右滑动显示电影院线。

我尝试为列表中的每个项目添加 snap-drawers 和 snap-content，但这没有用。

有没有人知道如何做到这一点。

代码： http://plnkr.co/edit/eFMdPBlWRKbCNYN3tzPx?p=preview

<div class="container">
    <div class="row">
      <ul>
        <li>
          <snap-drawers snap-id="'movie1'">
            <snap-drawer>
              Movie times
            </snap-drawer>
            <div snap-drawer="right">
              Movie cinemas
            </div>
          </snap-drawers>
          <snap-content snap-id="'movie1'">
            <snap-dragger>
              <h1>Movie 1</h1>
            </snap-dragger>
          </snap-content>
        </li>
        <li>
          <snap-drawers snap-id="'movie2'">
            <snap-drawer>
              Movie times
            </snap-drawer>
            <div snap-drawer="right">
              Movie cinemas
            </div>
          </snap-drawers>
          <snap-content snap-id="'movie2'">
            <snap-dragger>
              <h1>Movie 2</h1>
            </snap-dragger>
          </snap-content>
        </li>
        <li>
          <snap-drawers snap-id="'movie3'">
            <snap-drawer>
              Movie times
            </snap-drawer>
            <div snap-drawer="right">
              Movie cinemas
            </div>
          </snap-drawers>
          <snap-content snap-id="'movie3'">
            <snap-dragger>
              <h1>Movie 3</h1>
            </snap-dragger>
          </snap-content>
        </li>
      </ul>
    </div>
  </div>

谢谢，

Answer 1

我相信您的所有元素都已在 HTML 上呈现，但它们没有正确对齐。您应该使用 right 或 left 选项提供正确的对齐方式，例如 snap-drawers="left"、snap-drawer="left"、snap-content="left" 等

标记

<li>
    <snap-drawers="left" snap-id="'movie1'">
     <snap-drawer="left">
        Movie times
     </snap-drawer>
     <div snap-drawer="right">
         Movie cinemas
     </div>
     </snap-drawers>
     <snap-content="left" snap-id="'movie1'">
        <snap-dragger>
          <h1>Movie 1</h1>
        </snap-dragger>
     </snap-content>
</li>

Working Plunkr

在一个页面中有多个 snap-drawes 和 snap-contents

have multiple snap-drawes and snap-contents in a page

javascript

angularjs

snap.js