uniapp 卡片效果

uniapp 实现卡片效果的方法

使用 view 和 CSS 样式 通过 view 组件结合 CSS 样式可以快速实现卡片效果。设置圆角、阴影和边距来增强视觉层次感。

<view class="card">
  <text>卡片内容</text>
</view>

.card {
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 16px;
  margin: 10px;
  background-color: #ffffff;
}

使用 uni-card 组件（官方扩展组件） uniapp 官方提供了 uni-card 组件，直接调用即可生成标准卡片，支持标题、内容插槽和操作按钮。

<uni-card title="卡片标题">
  卡片主体内容
  <template v-slot:footer>
    <view class="footer">底部操作区</view>
  </template>
</uni-card>

通过 uView UI 第三方组件库 若项目引入了 uView UI，可使用其卡片组件 u-card，支持更丰富的配置如缩略图、标签等。

<u-card 
  title="带图片的卡片"
  :thumb="'https://example.com/image.jpg'"
  sub-title="副标题">
  <view>自定义内容区域</view>
</u-card>

自定义动态交互效果 结合动画或点击事件实现卡片悬停效果。通过 hover-class 或 JavaScript 动态修改样式。

<view 
  class="interactive-card" 
  hover-class="card-hover"
  @click="handleCardClick">
  可交互卡片
</view>

.interactive-card {
  transition: transform 0.3s;
}
.card-hover {
  transform: scale(1.02);
}

注意事项

• 阴影效果在部分小程序平台需使用 box-shadow 的兼容写法。
• 圆角属性 border-radius 在 iOS 设备上可能出现渲染差异，需测试调整。
• 卡片组件若嵌套滚动区域，需注意层级和事件冲突问题。