座位图多选

简介

此示例允许在座位图中单击一次选择多个座位：当用户希望预订相邻座位而无需多次单击时，此功能非常有用；请点击此处查看基本座位图示例。

设置

此外，必须在标题中导入使用的 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>

座位图状态

在这里，我们使用名为 seatMultiSelection 的 amp-state 来保存座位选择的所有有用信息。

我们从服务器加载相邻座位的列表
selectedSeats 包含选定座位 ID 的列表
numberOfSeats 包含我们想要自动选择的座位数量

<amp-state id="seatMultiSelection" src="https://amp.org.cn/static/samples/json/seatmap-neighbours.json">
  <script type="application/json">
  {
    "selectedSeats": [],
    "numberOfSeats": 3
  }
  </script>
</amp-state>

带多选功能的座位图

每次选择一个座位时，我们都会自动选择其右侧的 2 个座位。如果所选座位右侧的座位数少于 2 个，我们只会选择该行剩余的座位。

座位图

<div class="seatmap-container">
 <h1>Seat map</h1>
 <amp-list layout="fill" src="https://amp.org.cn/static/samples/json/seats.json" binding="refresh" items="." single-item noloading>
   <template type="amp-mustache">
     <amp-pan-zoom layout="fill" class="seatmap">
       <amp-selector on="select:AMP.setState({
         seatMultiSelection: {
           selectedSeats: event.selectedOptions.concat(
                         seatMultiSelection.neighbours[event.selectedOptions[0]].slice(0, seatMultiSelection.numberOfSeats-1))
           }
         })" 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}}" [class]="seatMultiSelection.selectedSeats.indexOf('{{id}}') != -1 ? 'selected seat {{unavailable}}' : 'seat {{unavailable}}'" x="{{x}}" y="{{y}}" width="{{width}}" height="{{height}}" rx="{{rx}}" ry="{{ry}}">
         </rect>
           {{/seats}}
           </svg>
         </div>
       </amp-selector>
     </amp-pan-zoom>
   </template>
   <div placeholder>
     <svg class="disabled" viewBox="0 0  " preserveAspectRatio="xMidYMin slice">
       </svg>
     </div>
 </amp-list>
 </div>

需要进一步解释吗？

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

前往 Stack Overflow

未解释的功能？

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

在 GitHub 上编辑示例

作者： @kul3r4