AMP - Показать больше и меньше параметров для динамических списков - PullRequest
Новая
       16

AMP - Показать больше и меньше параметров для динамических списков

0 голосов
/ 04 января 2019

Мне нужна кнопка показать больше / меньше с AMP.AMP предлагает показать больше компонентов при использовании списка усилителей (коды ниже).Я пытаюсь заставить кнопку show more измениться на кнопку show less, когда больше нет элементов для индексации и скрытия элементов в исходное состояние (в котором показаны только первые несколько элементов).Как мне этого добиться?Спасибо 

<!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>

1 Ответ

0 голосов
/ 04 января 2019

Исходя из этого потока , это можно сделать с помощью amp-bind.

Вы можете использовать неявную переменную состояния, например, visible, чтобы отслеживать текущее состояние.Вот пример, который переключает два класса 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>
...