座位图

简介

这是一个演示如何实现座位图的示例，该座位图可用于剧院、电影院、飞机等。我们将展示如何在座位图上平移和缩放以更好地选择座位、如何保持座位可用性的最新状态以及如何动态选择和取消选择座位。

设置

另外，必须在页眉中导入使用的 AMP 组件：amp-pan-zoom 用于使座位图可缩放和滚动

<script async custom-element="amp-pan-zoom" src="https://cdn.ampproject.org/v0/amp-pan-zoom-0.1.js"></script>

amp-bind 用于启用座位选择

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

amp-list 用于显示座位列表

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

amp-mustache 用于渲染 amp-list 内容

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

amp-selector 用于在座位图上选择座位

<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>

座位图状态

这里我们使用名为 selectedSeats 的 amp-state 来保存所选座位 ID 的列表。

<amp-state id="selectedSeats">
  <script type="application/json">
     []
  </script>
</amp-state>

座位图实现

我们结合使用 amp-list、amp-bind、amp-pan-zoom 和 amp-selector 来实现座位图

amp-list 用于保持座位图的可用性最新。
amp-bind 用于更新座位的状态：当选择一个座位时，我们会将座位 ID 添加到 selectedSeats 变量中。
amp-pan-zoom 用于在移动设备上启用平移和缩放。
amp-selector 用于选择座位并设置所选座位的样式

座位图

 <h1>Seat map</h1>
 <div class="seatmap-container">
  <amp-list layout="fill" src="/static/samples/json/seats.json" binding="refresh" items="." single-item noloading>
<!--START_HINT_0-->
    <template type="amp-mustache">
      <amp-pan-zoom layout="fill" class="seatmap">
        <amp-selector multiple on="select:AMP.setState({
                  selectedSeats: event.selectedOptions
                })" layout="fill">
          <div class="svg-container">
            <svg preserveAspectRatio="xMidYMin slice" viewBox="0 0 {{width}} {{height}}">
            {{#seats}}
              <rect option="{{id}}" role="button" tabindex="0" class="seat {{unavailable}}" x="{{x}}" y="{{y}}" width="{{width}}" height="{{height}}" rx="{{rx}}" ry="{{ry}}"/>
            {{/seats}}
            </svg>
          </div>
<!--END_HINT-->
        </amp-selector>
      </amp-pan-zoom>
    </template>
<!--START_HINT_1-->
    <div placeholder>
      <svg class="disabled" viewBox="0 0  " preserveAspectRatio="xMidYMin slice">
        </svg>
      </div>
<!--END_HINT-->
  </amp-list>
  </div>

需要进一步解释吗？

如果此页面上的解释没有涵盖您所有的问题，请随时与其他 AMP 用户联系，讨论您的具体用例。

前往 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的长期参与者，但我们也欢迎您为自己特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例

由 @kul3r4 撰写