时间戳

首页 > 解决方案 > 如何在 Onsen UI 中制作卡片视图列表？

html - 如何在 Onsen UI 中制作卡片视图列表？

问题描述

有这样的 HTML 代码，我想使用带有温泉 UI 的卡片视图来实现它。

<div *ngIf="content">
<div>
    <img src="https://monaca.io/img/logos/download_image_onsenui_01.png" alt="Onsen UI" style="width: 100%">
</div>
<div>
    <label>title : </label> {{content.title}}
</div>
<div>
    <label>Captio : </label> {{content.caption}}
</div>

当我没有用卡片温泉实现代码时，我得到了屏幕上显示的完美数据。

无卡温泉

但是，当我用卡片温泉实现代码时，卡片只会在屏幕上显示最新数据。

有卡温泉

为什么要这样做？这是我试图用卡片温泉实现的代码。

<ons-page>
<ons-card>
    <div class="content">
        <div *ngIf="content">
            <div>                        
                <img src="https://monaca.io/img/logos/download_image_onsenui_01.png" alt="Onsen UI" style="width: 100%">
            </div>
            <div>
                <label>title : </label> {{content.title}}
            </div>
            <div>
                <label>Captio : </label> {{content.caption}}
            </div>
        </div>
    </div>
</ons-card>

标签： htmlangularonsen-ui

解决方案

推荐阅读