当前位置：首页 > uni-app

uniapp卡片代码

2026-03-05 06:41:32uni-app

以下是在UniApp中实现卡片布局的代码示例和关键方法，适用于常见场景如商品展示、信息卡片等：

基础卡片布局

使用view组件配合CSS实现基础卡片效果：

uniapp卡片代码

<template>
  <view class="card">
    <image 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>
</template>

<style>
.card {
  width: 90%;
  margin: 20px auto;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  background-color: #fff;
}
.card-image {
  width: 100%;
  height: 200px;
}
.card-content {
  padding: 15px;
}
.card-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  display: block;
}
.card-desc {
  font-size: 14px;
  color: #666;
}
</style>

动态列表卡片

结合v-for渲染动态数据：

<template>
  <view v-for="(item, index) in cardList" :key="index" class="card">
    <image class="card-image" :src="item.imageUrl"></image>
    <view class="card-content">
      <text class="card-title">{{ item.title }}</text>
      <text class="card-price">¥{{ item.price }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cardList: [
        { imageUrl: '/static/product1.jpg', title: '商品A', price: 99 },
        { imageUrl: '/static/product2.jpg', title: '商品B', price: 129 }
      ]
    }
  }
}
</script>

交互式卡片

添加点击事件和动画效果：

uniapp卡片代码

<template>
  <view 
    class="card" 
    @click="handleCardClick"
    :class="{ 'card-active': isActive }"
    hover-class="card-hover"
  >
    <!-- 卡片内容 -->
  </view>
</template>

<style>
.card-hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
.card-active {
  border: 2px solid #007AFF;
}
</style>

<script>
export default {
  methods: {
    handleCardClick() {
      uni.showToast({ title: '卡片被点击' });
    }
  }
}
</script>

高级卡片特性

实现带操作按钮的卡片：

<view class="card-with-actions">
  <view class="card-main">
    <!-- 主要内容 -->
  </view>
  <view class="card-actions">
    <button size="mini" @click="handleAction1">操作1</button>
    <button size="mini" @click="handleAction2">操作2</button>
  </view>
</view>

<style>
.card-with-actions {
  position: relative;
  padding-bottom: 50px;
}
.card-actions {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background-color: #f5f5f5;
}
</style>

关键注意点：