0
我试图用amp-live-list显示一个项目。我需要只显示一个项目并每10秒更新一次。用amp-live-list更新单个和同一个项目
我现在的解决方案只显示<div items>的第一个子元素，但不是很有信心，这是一个正确的方法。
这里是我创建的小提琴，虽然你不能看到amp-live-list如何工作，因为小提琴会自动更新html源码。但我希望你能看到代码，以便更容易理解我想要做的事情。谢谢！
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
body{font-family: arial, helvetica, sans-serif;}
pre{background: #FFF8DC;padding: 10px}
.amp-live-list-item{justify-content:center;display:flex;}
.blog{padding:0;background:#fff;width:300px;}
.blog p{padding:8px;margin:0;}
.match{background:#fff;min-width:0%;}
.side{display:flex;align-items:center;justify-content:space-around;}
.content{font-size:2rem;padding:8px;}
.flag{padding-top:8px;padding-bottom:8px;}
.amp-live-list-item{display:none;}
.amp-live-list-item:first-child{display:flex;}
</style>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-element="amp-live-list" src="https://cdn.ampproject.org/v0/amp-live-list-0.1.js"></script>
<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>
<p>I want to show only one element below. I hide the other two elements with css as below to show the most updated content.</p>
<pre>.amp-live-list-item{display:none;}
.amp-live-list-item:first-child{display:flex;}
</pre>
<br>
<p>Not sure whether this is a proper way to do.</p>
<hr>
<amp-live-list layout="container"
data-poll-interval="10000"
data-max-items-per-page="2"
id="amp-live-list-time">
<button update
on="tap:amp-live-list-time.update"
class="ampstart-btn ml1 caps">Update</button>
<div items>
<div id="item3"
data-update-time="20170610"
data-sort-time="20170610">
<div class="card blog">
<a href="">
<p>Night</p>
</a>
</div>
</div>
<div id="item2"
data-update-time="20170609"
data-sort-time="20170609">
<div class="card blog">
<a href="">
<p>Afternoon</p>
</a>
</div>
</div>
<div id="item1"
data-update-time="20170608"
data-sort-time="20170608">
<div class="card blog">
<a href="">
<p>Morning</p>
</a>
</div>
</div>
</div>
</amp-live-list>
</body>
</html>