uniapp 卡片效果

实现卡片效果的方法

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

使用CSS样式

通过CSS的box-shadow和border-radius属性可以快速实现卡片效果。示例代码如下：

<template>
  <view class="card">
    <text>这是一个卡片</text>
  </view>
</template>

<style>
.card {
  width: 300px;
  padding: 20px;
  margin: 10px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
}
</style>

使用uni-card组件

UniApp提供了uni-card组件，可以快速实现卡片布局。该组件已经内置了阴影、圆角等样式：

<template>
  <uni-card>
    <text>卡片内容</text>
  </uni-card>
</template>

自定义卡片组件

如果需要更复杂的卡片效果，可以创建自定义组件：

<template>
  <view class="custom-card">
    <slot></slot>
  </view>
</template>

<style>
.custom-card {
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  background: linear-gradient(to bottom, #ffffff, #f5f5f5);
  padding: 16px;
  margin: 8px;
}
</style>

卡片动画效果

为卡片添加悬停或点击动画可以增强用户体验：

悬停效果

.card:hover {
  transform: translateY(-5px);
  transition: transform 0.3s ease;
}

点击效果

.card:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

卡片布局技巧

在卡片内部组织内容时，可以采用以下布局方式：

图文卡片

<view class="card">
  <image src="/static/image.jpg" mode="aspectFill"></image>
  <view class="content">
    <text class="title">卡片标题</text>
    <text class="desc">卡片描述内容</text>
  </view>
</view>

列表卡片

<view class="card">
  <view class="list-item" v-for="item in list" :key="item.id">
    <text>{{item.text}}</text>
  </view>
</view>

注意事项

• 在H5端使用时，注意box-shadow性能问题
• 小程序端可能需要使用border替代部分阴影效果
• 响应式设计应考虑不同屏幕尺寸下的卡片宽度
• 深色模式下需要调整卡片背景色和阴影颜色

以上方法可以根据具体需求组合使用，创建出各种风格的卡片效果。