uniapp中uni-card
时间: 2023-12-24 18:04:46 浏览: 198
uni-card是uniapp中的一个组件,用于展示一些简单的卡片式内容。它可以包含图片、标题、内容、底部操作区等元素。
使用uni-card组件可以方便快捷地创建卡片式布局,适用于展示商品、消息、文章等信息。
下面是一个uni-card的示例代码:
```
<template>
<view>
<uni-card>
<image slot="thumb" src="/static/logo.png"></image>
<view slot="header">标题</view>
<view slot="content">内容</view>
<view slot="footer">
<uni-icons type="like"></uni-icons>
<uni-icons type="comment"></uni-icons>
<uni-icons type="share"></uni-icons>
</view>
</uni-card>
</view>
</template>
```
在这个示例中,我们创建了一个包含图片、标题、内容和底部操作区的卡片。其中,图片使用了slot="thumb"指定了插槽,标题和内容使用了slot="header"和slot="content"指定了插槽,底部操作区使用了slot="footer"指定了插槽,并包含了三个uni-icons图标组件。
通过这样的方式,我们可以灵活地组合各种元素来创建不同风格的卡片布局。
阅读全文