Question

我有我的HTML：

[
    "dirtest/bar.txt",
    "dirtest/foo/foo.txt",
    "index.js"
]

应该显示带有我在<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>文件中指定的产品图片的轮播。但是，如果您查看我的页面here，该页面将无法正常运行。我尝试删除了动态函数，并且该函数可以按预期工作，因此使用data.json会使它感到困惑。我关注了AMP Project GitHub上的问题：here，here和here。

这是组件应该的样子：

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",
                    },
            ]
        }
    ]
}

我们从api获得的json数据格式以上。如果您没有来自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>

以上轮播代码。

它将如上显示。

谢谢

维萨尔

<amp-carousel>与使用<amp-list>的动态数据无法正常工作

2 个答案: