当前位置：首页 > uni-app

uniapp 卡片效果

2026-03-04 21:32:05uni-app

实现卡片效果的方法

在UniApp中实现卡片效果可以通过多种方式，以下是几种常见的实现方法：

使用CSS样式

通过设置边框、阴影和圆角等CSS属性来模拟卡片效果：

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

使用uni-card组件

UniApp提供了内置的uni-card组件，可以快速实现卡片效果：

<uni-card title="卡片标题" extra="额外信息" note="备注信息">
  <text>卡片内容</text>
</uni-card>

自定义卡片组件

创建自定义组件实现更灵活的卡片效果：

<template>
  <view class="custom-card">
    <view class="card-header" v-if="title">
      {{title}}
    </view>
    <view class="card-content">
      <slot></slot>
    </view>
    <view class="card-footer" v-if="footer">
      {{footer}}
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: String,
    footer: String
  }
}
</script>

<style>
.custom-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: #fff;
  overflow: hidden;
  margin: 15px;
}
.card-header {
  padding: 15px;
  font-weight: bold;
  border-bottom: 1px solid #f0f0f0;
}
.card-content {
  padding: 15px;
}
.card-footer {
  padding: 15px;
  color: #888;
  font-size: 12px;
  border-top: 1px solid #f0f0f0;
}
</style>

卡片交互效果

为卡片添加点击效果可以提升用户体验：

添加点击反馈

.card:active {
  transform: scale(0.98);
  opacity: 0.9;
}

添加点击事件

<view class="card" @click="handleCardClick">
  卡片内容
</view>

高级卡片效果

图片卡片

<view class="image-card">
  <image src="/static/demo.jpg" mode="aspectFill"></image>
  <view class="image-card-content">
    <text>图片描述</text>
  </view>
</view>

<style>
.image-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.image-card image {
  width: 100%;
  height: 200px;
}
.image-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
}
</style>

网格卡片布局

<view class="card-grid">
  <view class="grid-item" v-for="(item, index) in 6" :key="index">
    <text>卡片{{index+1}}</text>
  </view>
</view>

<style>
.card-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}
.grid-item {
  width: calc(50% - 20px);
  margin: 10px;
  height: 120px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

这些方法可以根据实际需求进行组合和调整，实现各种风格的卡片效果。

uniapp 卡片效果