AMP-显示更多或更少的动态列表选项

Question

I need a show more/less button with AMP. 我需要使用AMP显示更多/更少按钮。 AMP offers a show more component when use amp-list (codes below). 当使用amp-list（以下代码）时，AMP提供了更多的显示组件。 I'm trying to make the show more button to change to show less button when there are no more items to index and hide the items back to its original state (which shows the first few items only). 我试图使“ show more按钮更改为在没有更多要索引的项目时show less按钮，并将这些项目隐藏回到其原始状态（仅显示前几个项目）。 How can I achieve this? 我该如何实现？ Thanks 谢谢

<!doctype html>
     <html ⚡>
     <head>
      <meta charset="utf-8">
      <script async src="https://cdn.ampproject.org/v0.js"></script>

      <!-- ## Setup -->
      <!-- Additionally used AMP components must be imported in the header. We use `amp-list` for showing a list of products -->
      <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
      <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
      <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
      <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
      <link rel="canonical" href="https://ampbyexample.com/advanced/show_more_button/">
      <title>Load more button</title>

      <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">    
      <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>    
    </head>
    <body>
      <amp-state id="productsState" src="/json/related_products.json">
      </amp-state>

      <!-- ... while the `amp-state` with id `product` is just used to implement the show-more logic where we are allowing the user to click 3 times. -->
      <amp-state id="product">
        <script type="application/json">
        {
          "moreItemsPageIndex": 0,
          "hasMorePages": true
        }
        </script>
      </amp-state>
      <amp-list src="/json/related_products.json"
                [src]="productsState.items"
                width="320"
                height="144"
                [height]="productsState.items.length * 24"
                class="m1">
        <template type="amp-mustache">
          <strong>Product</strong>: {{name}}
          <strong>Price</strong>: ${{price}}
        </template>
      </amp-list>

      <!-- The show more button is implemented via a form which triggers a page update on the `submit-success` event.
          We are then merging the form results into the items already loaded by the `amp-state` using the `concat` function. -->
          <form method="GET"
                action="/json/more_related_products_page"
                action-xhr="/json/more_related_products_page"
                target="_top"
                on="submit-success: AMP.setState({
                  productsState: {
                    items: productsState.items.concat(event.response.items)
                  },
                  product: {
                    moreItemsPageIndex: product.moreItemsPageIndex + 1,
                    hasMorePages: event.response.hasMorePages
                  }
                });">
            <input type="hidden" name="moreItemsPageIndex" value="0" [value]="product.moreItemsPageIndex">
            <input type="submit"
                   value="Show more"
                   class="ampstart-btn caps m1 show"
                   [class] = "(product.hasMorePages == false ? 'hide' : 'ampstart-btn caps m1 mb3 show')">
        </form>

    </body>
    </html>

Answer 1

Based from this thread , this can be done via amp-bind . 基于此线程，可以通过amp-bind完成此操作。

You can use an implicit state variable, eg visible , to track the current state. 您可以使用隐式状态变量（例如visible ）来跟踪当前状态。 Here is a sample that toggles two classes show and hide : 这是切换两个类show和hide的示例：
 <button [text]="visible ? 'Show Less' : 'Show More'" on="tap:AMP.setState({visible: !visible})"> Show More </button> <p [class]="visible ? 'show' : 'hide'" class="hide"> Some more content. </p> 

AMP-显示更多或更少的动态列表选项

问题描述

1 个解决方案

解决方案1
2 2019-01-04 12:39:45

AMP-显示更多或更少的动态列表选项

问题描述

1 个解决方案

解决方案1 2 2019-01-04 12:39:45

解决方案1
2 2019-01-04 12:39:45