Html AMP-显示动态列表的更多和更少选项
我需要一个带放大器的“显示更多/更少”按钮。AMP在使用AMP列表时提供“显示更多”组件（代码如下）。我试图使Html AMP-显示动态列表的更多和更少选项,html,amp-html,Html,Amp Html,我需要一个带放大器的“显示更多/更少”按钮。AMP在使用AMP列表时提供“显示更多”组件（代码如下）。我试图使显示更多按钮变为显示较少按钮，当没有更多项目要索引时，将项目隐藏回其原始状态（仅显示前几个项目）。我怎样才能做到这一点？谢谢 <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <script async src="https://c
显示更多显示较少<!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>
加载更多按钮
body{-webkit动画：-amp start 8s steps（1，end）0s1 normal tweet；-moz动画：-amp start 8s steps（1，end）0s1 normal tweet；-ms动画：-amp start 8s steps（1，end）0s1 normal tweet}@-webkit关键帧-amp start{从{可见性：隐藏}到{可见性：可见}}@-moz关键帧-amp start{from{可见性：隐藏}
{
“moreItemsPageIndex”：0，
“hasMorePages”：正确
}
产品：{{name}
价格：${{Price}
visibleshowhide<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>
显示更多
更多的内容。
visibleshowhide<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>
显示更多
更多的内容。