Question

我正在寻找一个利基天气网站的AMP版本。与天气有关，存在单位问题-C / F，MPH / KMH等。

这不是问题，除非我也有特定于单元的图像和图表。在HTML版本上，我可以轻松地使用一些JS来交换单位，但是，除了链接到另一页面之外，在AMP页面上看不到做到这一点的方法。

那么，是否有AMP方式可以做到这一点？或者我只是在寻找一个更换单元链接？谢谢

Answer 1

您可能需要结合使用amp-bind和amp-list。 amp-list组件将使您能够从JSON端点获取内容，我认为这是您的天气数据来源。然后，您可以根据用户选择的度量单位，使用amp-bind切换页面上图表的可见状态。您可以在AMP website上找到更多深入的示例，但这是一个简短的示例，当您单击两个按钮系列时，可以在div上切换样式。

头：

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

<amp-state id="unitMeasurement">
  <script type="application/json">
    {
      "selected": "f",
      "f": {
        "style": "showF",
      },
      "c": {
        "style": "showC",
      }
    }
  </script>
</amp-state>

身体

<button class="btn"
  on="tap:AMP.setState({unitMeasurement: {selected: 'f'}})">
  Switch F
</button>

<button class="btn"
  on="tap:AMP.setState({unitMeasurement: {selected: 'c'}})">
  Switch C
</button>

<p [class]="unitMeasurement[unitMeasurement.selected].style"
  class="measurement">Units.</p>

具有“更改单位”功能的AMP页面，用于天气网站

1 个答案: