座位图

简介

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

设置

其他使用的 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 编写