uniapp插件推荐 uni-card 卡片

dxiyigii2

本组件符合easycom规范


基本用法

在 template 中使用组件

[JavaScript] 纯文本查看 复制代码

<!-- 一般用法 -->
<uni-card title="标题文字" thumbnail="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" extra="额外信息" note="Tips">
    内容主体，可自定义内容及样式
</uni-card>

<!-- 内容通栏 -->
<uni-card is-full="true" title="DCloud" thumbnail="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" extra="2018.12.12" >
    <image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" style="width: 100%;"></image>
</uni-card>

<!-- 图文卡片模式 -->
<uni-card
    title="标题文字"
    mode="style"
    :is-shadow="true"
    thumbnail="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
    extra="Dcloud 2019-05-20 12:32:19"
    note="Tips"
>
        uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可编译到iOS、Android、H5、以及各种小程序等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。
</uni-card>

<!-- 标题卡片模式 -->
<uni-card 
    title="Dcloud" 
    mode="title" 
    :is-shadow="true" 
    thumbnail="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" 
    extra="技术没有上限" 
    note="Tips"
>
    uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可编译到iOS、Android、H5、以及各种小程序等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。
</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>

插件市场地址: https://ext.dcloud.net.cn/plugin?id=22