更新记录

1.1.2(2019-07-19)

  • 修复 依赖组件找不到的问题

1.1.1(2019-07-15)

更新 readme 查看更多


Card 卡片

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

使用方式:

script 中引用组件

  1. import uniCard from "@/components/uni-card/uni-card"
  2. export default {
  3. components: {uniCard}
  4. }

一般用法

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

内容通栏

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

图文卡片模式

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

标题卡片模式

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

自定义底部按钮

  1. <uni-card title="Dcloud" note="true">
  2. 默认内容
  3. <template v-slot:footer>
  4. <view class="footer-box">
  5. <view>喜欢</view>
  6. <view>评论</view>
  7. <view>分享</view>
  8. </view>
  9. </template>
  10. </uni-card>

Tips

  • 自定义底部按钮,必须指定 <template v-slot:footer> </template> 。此时 note 随意指定内容即可。 属性说明:
属性名类型默认值说明
titleString-标题文字
extraString-标题额外信息
noteString-底部信息
thumbnailString-标题左侧缩略图
modeStringbasic卡片模式 ,可选值, basic:基础卡片 ;style :图文卡片 ; title :标题卡片
is-fullBooleanfalse卡片内容是否通栏,为true时将去除padding值
is-shadowBooleanfalse卡片内容是否开启阴影

事件说明:

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

更新日志

1.1.2

  • 修复 依赖组件找不到的问题 1.1.1

  • 更新 readme 1.1.0

  • 修复 v-for 循环,内容不显示的 bug。(需要 HBuilderX 开启自定义组件模式)

  • 添加图文卡片模式
  • 修复点击事件失效的 bug
  • 优化代码示例显示效果
  • 添加更多自定义模式 1.0.0

  • 初始项目