<amp-carousel>不按预期使用<amp-list>处理动态数据

Question

我有HTML：

<amp-list height="400" layout="fixed-height" src="data.json">
   <template type="amp-mustache">
      <amp-carousel height="200" layout="fixed-height" type="carousel">
         <amp-img src="img/{{ imgSrc }}.jpg" layout="fixed" width="100" height="100" alt="{{ productName }}"></amp-img>
      </amp-carousel>
   </template>
</amp-list>

它应该使用我在data.json文件中指定的产品映像显示一个旋转木马。但是，如果您查看我的页面这里，它并不像我所期望的那样起作用。我试着删除动态函数，它按照预期工作，所以<amp-list>的一些东西会使它混淆。我跟踪了AMP项目GitHub上的问题：这里、这里和这里。

下面是组件应该的样子：

https://ampbyexample.com/playground/#url=https%3A%2F%2Fampbyexample.com%2Fcomponents%2Famp-carousel%2Fsource%2F&mode=Responsive

现在看起来是这样的：

https://www.perfectimprints.com/amp/product/offering-buckets/

任何见解都将不胜感激。谢谢!

Answer 1

它们的关键是在single-item模式下使用放大器列表，然后手动迭代不同的项：

<amp-list width="325" height="325" layout="fixed" single-item src="/items.json">
  <template type="amp-mustache">
    <amp-carousel type="slides" layout="fill">
      {{#items}}
      <amp-img src="{{src}}" layout="fill" alt="{{alt}}"></amp-img>
      {{/items}}
    </amp-carousel>
  </template>
</amp-list>

另一个技巧是让放大器列表定义布局，然后对旋转木马和图像使用填充布局。

Answer 2

我有办法解决这个问题。

{
items: [
        {
        values: [
                    {
                        category:"cate1",
                        image_link: "url1",
                    },
                    {
                        category:"cate1",
                        image_link: "url2",
                    },
                    {
                        category:"cate1",
                        image_link: "url3",
                    },
                    {
                        category:"cate1",
                        image_link: "url4",
                    },
            ]
        }
    ]
}

以上json数据格式是我们从api中获得的。如果您没有来自api的这种格式数据，那么您只能使用这种格式。

<amp-list id="list_id" width="350" height="150" layout="flex-item"
                    src="api url">
                    <template type="amp-mustache">
                        <amp-carousel width="350" height="150" layout="fixed" type="carousel" autoplay delay="2000"
                            loop>
                            {{#values}}
                            <div role="text">
                                <amp-img src="{{image_link}}" layout="fixed" width="100" height="100" alt="{{title}}">
                                </amp-img>
                                <p class="category_label">{{category}}</p>
                            </div>
                            {{/values}}
                        </amp-carousel>
                    </template>
                </amp-list>

以上代码为旋转木马。

​

​

它会像上面那样显示。

谢谢

维沙尔

Answer 3

有一个解决办法，你需要尝试。

amp-list需要一个项数组或对象。要使amp-carousel与amp-list和amp-mustache协同工作，您需要像这样构造响应。

  {"items": [{
    "values": [/*...*/]

在html代码中这样做，

<amp-list height="400" layout="fixed-height" src="data.json">
   <template type="amp-mustache">
      <amp-carousel height="400" layout="fixed-height" type="carousel">
       {{#values}}
         <amp-img src="img/{{imgSrc}}.jpg" layout="fixed" width="100" height="100" alt="{{productName}}"></amp-img>
       {{/values}}
      </amp-carousel>
   </template>
</amp-list>

如果您的箭头正在消失，那么您需要添加controls属性到amp-carousal。

<amp-carousel height="400" layout="fixed-height" type="carousel" controls>
.
.
</amp-carousel>