uniapp 卡片布局

卡片布局的实现方法

在UniApp中实现卡片布局可以通过多种方式完成，以下介绍几种常见的方法：

使用CSS样式自定义卡片 通过设置border-radius、box-shadow等CSS属性可以快速创建卡片效果：

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

使用uni-card组件 UniApp提供了内置的uni-card组件，可以快速实现卡片布局：

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

使用UI框架 第三方UI框架如uView、ColorUI等提供了丰富的卡片组件：

<u-card 
  :title="item.title" 
  :sub-title="item.subTitle" 
  :thumb="item.thumb">
  <view class="card-body">{{item.content}}</view>
</u-card>

卡片布局的常见样式

阴影效果 通过调整阴影参数可以创建不同深度的卡片：

.shadow-sm {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.shadow-md {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

圆角设置 不同大小的圆角可以创建不同风格的卡片：

.rounded-sm {
  border-radius: 4px;
}
.rounded-lg {
  border-radius: 12px;
}

卡片布局的内容组织

图文混排卡片

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

列表式卡片

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

响应式卡片布局

使用flex布局

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.card {
  width: 48%;
  margin-bottom: 15px;
}

媒体查询适配不同屏幕

@media screen and (min-width: 768px) {
  .card {
    width: 30%;
  }
}

卡片交互效果

点击效果

<view class="card" @click="handleCardClick">
  <text>可点击卡片</text>
</view>

悬停效果

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

通过以上方法可以在UniApp中实现各种风格的卡片布局，根据实际需求选择合适的实现方式。卡片布局的关键在于视觉效果和内容组织的平衡，确保既美观又实用。