更新记录

1.1.3(2019-09-21)

  • 修复 示例项目找不到 uni-icons 的 Bug

1.1.2(2019-07-19)

  • 修复 依赖组件找不到的问题
查看更多

Card 卡片

卡片视图组件,组件名:uni-card,代码块: uCard。

使用方式:

script 中引用组件

import uniCard from "@/components/uni-card/uni-card"
export default {
    components: {uniCard}
}

一般用法

<uni-card title="标题文字" thumbnail="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png" extra="额外信息" note="Tips">
    内容主体,可自定义内容及样式
</uni-card>

内容通栏

<uni-card is-full="true" title="DCloud" thumbnail="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png" extra="2018.12.12" >
    <image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" style="width: 100%;"></image>
</uni-card>

图文卡片模式

<uni-card
    title="标题文字"
    mode="style"
    :is-shadow="true"
    thumbnail="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg"
    extra="Dcloud 2019-05-20 12:32:19"
    note="Tips"
>
        那是一个秋意盎然、金风送爽的日子,我和父母一起来到了位于上师大旁的康健园。一踏进公园,一股浓郁的桂香扑鼻而来,泌人心脾,让我心旷神怡,只见一朵朵开得正烈的金色桂花,迎风而立,仿佛在向我招手。我们追着这桂香,走进了清幽的公园。
</uni-card>

标题卡片模式

<uni-card 
    title="Dcloud" 
    mode="title" 
    :is-shadow="true" 
    thumbnail="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg" 
    extra="技术没有上限" 
    note="Tips"
>
    那是一个秋意盎然、金风送爽的日子,我和父母一起来到了位于上师大旁的康健园.一踏进公园,一股浓郁的桂香扑鼻而来,泌人心脾,让我心旷神怡,只见一朵朵开得正烈的金色桂花,迎风而立,仿佛在向我招手.我们追着这桂香,走进了清幽的公园.
</uni-card>

自定义底部按钮

<uni-card title="Dcloud" note="true">
    默认内容
    <template v-slot:footer>
        <view class="footer-box">
            <view>喜欢</view>
            <view>评论</view>
            <view>分享</view>
        </view>
    </template>
</uni-card>

Tips

  • 自定义底部按钮,必须指定 <template v-slot:footer> </template> 。此时 note 随意指定内容即可。

属性说明:

属性名 类型 默认值 说明
title String - 标题文字
extra String - 标题额外信息
note String - 底部信息
thumbnail String - 标题左侧缩略图
mode String basic 卡片模式 ,可选值, basic:基础卡片 ;style :图文卡片 ; title :标题卡片
is-full Boolean false 卡片内容是否通栏,为true时将去除padding值
is-shadow Boolean false 卡片内容是否开启阴影

事件说明:

事件称名 说明 返回参数
click 点击 Card 触发事件 -

插件预览地址

https://uniapp.dcloud.io/h5/pages/extUI/card/card

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

2. 本插件采集的手机端数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问