更新记录

2.0.0（2025-12-06） 下载此版本

重大更新 - 新增多项高级功能

新增功能

• 进入动画：支持 slideIn、fadeIn、zoom、bounceIn 四种进入动画效果
• 骨架屏加载：新增 skeleton 模式，提供优雅的加载状态展示
• 徽章支持：支持在标题旁显示徽章（badge），可自定义颜色
• 标题图标：支持在标题前添加图标（emoji 或图标字体）
• 更多卡片类型：新增 product（商品）、profile（用户）、notification（通知）类型
• 长按事件：新增 longpress 事件支持
• 图片懒加载：封面图片支持懒加载，优化性能
• 头部右侧插槽：新增 header-right 插槽，可在头部右侧添加自定义内容
• 卡片高度配置：新增 height 属性，可自定义卡片高度
• 分割线配置：底部分割线可通过 showFooterDivider 控制显示/隐藏

1.0.0（2025-09-01） 下载此版本

• 多种卡片类型（基础、图文、数据统计等）
• 丰富的交互反馈（阴影、悬停、涟漪效果、加载状态）
• 高度灵活的样式配置和插槽
• 全平台兼容（H5、小程序、App）

平台兼容性

uni-app(3.6.15)

其他

hy-card-plus 增强型卡片组件

一个功能丰富、高度可定制的 UniApp 卡片组件，支持多种动画效果、骨架屏、徽章等高级功能。

✨ 特性

• 🎨 多种卡片类型：基础、图文、数据统计、商品、用户、通知等
• 🎭 进入动画：slideIn、fadeIn、zoom、bounceIn 四种动画效果
• 💀 骨架屏加载：优雅的加载状态展示
• 🏷️ 徽章支持：标题徽章、封面角标
• 🎯 丰富交互：点击、长按、涟漪效果、悬停态
• 🎛️ 高度可定制：样式配置、插槽系统、主题定制
• 🚀 性能优化：图片懒加载、按需渲染
• 📱 全平台兼容：H5、小程序、App 全端支持

🆕 V2.0 新增功能

• ✅ 进入动画效果（slideIn/fadeIn/zoom/bounceIn）
• ✅ 骨架屏加载模式
• ✅ 徽章和标题图标支持
• ✅ 长按事件支持
• ✅ 图片懒加载
• ✅ 更多卡片类型（product/profile/notification）
• ✅ 头部右侧插槽
• ✅ 卡片高度配置
• ✅ 底部分割线控制

安装

1. 将 hy-card-plus 组件目录拷贝到您的 UniApp 项目的 components 目录下。
2. 在需要使用的页面或全局注册组件。

📦 快速开始

基础用法

<hy-card-plus title="标题" sub-title="副标题" @click="onClick">
  <text>这里是卡片内容</text>
</hy-card-plus>

图文卡片

<hy-card-plus 
  title="标题" 
  sub-title="副标题" 
  cover="/static/example.jpg" 
  cover-tag="New"
  cover-tag-type="primary">
  <text>这里是卡片内容</text>
  <template v-slot:actions>
    <button size="mini">按钮</button>
  </template>
</hy-card-plus>

带动画效果

<hy-card-plus title="滑入动画" animation="slideIn">
  <text>卡片内容</text>
</hy-card-plus>

徽章和图标

<hy-card-plus 
  title="标题" 
  title-icon="🎉"
  badge="HOT"
  badge-color="#06b6d4">
  <text>带徽章的卡片</text>
</hy-card-plus>

骨架屏加载

<hy-card-plus :skeleton="loading" title="加载中">
  <text>加载完成后显示的内容</text>
</hy-card-plus>

商品卡片

<hy-card-plus 
  type="product"
  title="商品名称" 
  cover="/static/product.jpg"
  cover-tag="8折">
  <view class="price">¥239</view>
  <template v-slot:actions>
    <button size="mini">立即购买</button>
  </template>
</hy-card-plus>

📖 API 文档

Props 配置

Events 事件

Slots 插槽

🎨 示例场景

1. 数据统计卡片

<hy-card-plus type="stats" title="数据概览" animation="fadeIn">
  <view class="stats">
    <view class="stat-item">
      <text class="value">1,234</text>
      <text class="label">访问量</text>
    </view>
    <!-- 更多统计项... -->
  </view>
</hy-card-plus>

2. 用户信息卡片

<hy-card-plus type="profile" animation="slideIn">
  <template v-slot:header>
    <view class="profile">
      <image class="avatar" src="/static/avatar.jpg"></image>
      <view class="info">
        <text class="name">张三</text>
        <text class="desc">资深开发者</text>
      </view>
    </view>
  </template>
  <view class="stats">...</view>
</hy-card-plus>

3. 通知卡片

<hy-card-plus 
  type="notification"
  title="系统消息"
  title-icon="📧"
  badge="5"
  animation="bounceIn">
  <text>你有 5 条新消息</text>
  <template v-slot:header-right>
    <text class="time">2分钟前</text>
  </template>
</hy-card-plus>

💡 最佳实践

1. 性能优化：对于长列表，建议开启图片懒加载 lazy-load="true"
2. 动画使用：避免同时为大量卡片设置动画，建议按需或分批加载
3. 骨架屏：数据加载时使用骨架屏提升用户体验
4. 响应式设计：使用 rpx 单位确保多端适配
5. 事件处理：合理使用点击和长按事件，提供丰富的交互体验

🔧 版本要求

• HBuilderX：^3.1.0
• uni-app：^4.07
• Vue：2.x / 3.x 均支持

📄 许可证

MIT License