UniApp实战：5分钟搞定Card卡片组件的6种高级玩法（附代码）

UniApp Card组件深度实战：6种商业级应用场景与代码优化

在移动应用开发中，卡片式设计已经成为信息展示的主流方式之一。UniApp的uni-card组件不仅提供了基础展示功能，更通过灵活的插槽和属性配置，能够满足各种复杂业务场景的需求。本文将深入探讨uni-card组件的6种高级应用场景，从电商商品展示到社交动态卡片，每个案例都配有经过生产环境验证的优化代码。

1. 电商平台商品卡片设计

电商应用的核心是商品展示，一个优秀的商品卡片能显著提升转化率。uni-card组件通过组合多种属性，可以构建出既美观又功能完善的商品展示单元。

<template>
  <uni-card 
    :is-shadow="true" 
    :border="false"
    @click="handleCardClick(item.id)"
  >
    <template v-slot:cover>
      <image 
        mode="aspectFill" 
        :src="https://blog.csdn.net/item.mainImage" 
        class="product-image"
        @error="handleImageError"
      />
    </template>
    
    <view class="product-info">
      <text class="product-title">{
  
  {item.title}}</text>
      <view class="price-section">
        <text class="current-price">¥{
  
  {item.price}}</text>
        <text class="original-price" v-if="item.originalPrice">¥{
  
  {item.originalPrice}}</text>
        <text class="sales">已售{
  
  {item.salesCount}}件</text>
      </view>
    </view>
    
    <template v-slot:actions>
      <view class="action-bar">
        <button class="add-cart" @click.stop="addToCart(item)">加入购物车</button>
        <button class="buy-now" @click.stop="buyNow(item)">立即购买</button>
      </view>
    </template>
  </uni-card>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  methods: {
    handleImageError(e) {
      console.error('图片加载失败:', e)
      this.item.mainImage = '/static/images/product-default.png'
    },
    // 其他方法...
  }
}
</script>

<style scoped>
.product-image {
  width: 100%;
  height: 320rpx;
  border-radius: 8rpx 8rpx 0 0;
}
.product-info {
  padding: 20rpx;
}
.product-title {
  font-size: 28rpx;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.price-section {
  margin-top: 15rpx;
  display: flex;
  align-items: center;
}
.current-price {
  color: #ff4d4f;
  font-size: 32rpx;
  font-weight: bold;
}
.original-price {
  color: #999;
  font-size: 24rpx;
  text-decoration: line-through;
  margin-left: 10rpx;
}
.sales {
  color: #666;
  font-size: 24rpx;
  margin-left: auto;
}
.action-bar {
  display: flex;
  padding: 0 20rpx 20rpx;
}
.action-bar button {
  flex: 1;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  border-radius: 35rpx;
}
.add-cart {
  background: #fff7e6;
  color: #fa8c16;
  margin-right: 20rpx;
}
.buy-now {
  background: #ff4d4f;
  color: white;
}
</style>

关键优化点：

• 使用aspectFill图片模式确保商品图片比例正确
• 添加图片加载错误处理机制
• 价格区域采用弹性布局实现自适应
• 按钮添加stop修饰符防止事件冒泡
• 标题文字超出时显示省略号
• 为重要操作按钮设计差异化样式

2. 新闻资讯卡片与性能优化

新闻类应用需要展示大量图文内容，对滚动性能和内存管理有较高要求。通过uni-card的插槽系统，我们可以构建高性能的新闻列表。

<template>
  <uni-card
    :is-shadow="!item.isRead"
    :border="false"
    margin="20rpx"
    @click="readNews(item.id)"
  >
    <view class="news-container">
      <view class="text-content" :class="{read: item.isRead}">
        <text class="title">{
  
  {item.title}}</text>
        <text class="summary">{
  
  {item.summary}}</text>
      </view>
      <image 
        v-if="item.cover"
        class="cover-image"
        :src="https://blog.csdn.net/item.cover%20+'?imageView2/1/w/200/h/150'"
        mode="aspectFill"
        lazy-load
      />
    </view>
    
    <template v-slot:footer>
      <view class="footer-info">
        <text class="source">{
  
  {item.source}}</text>
        <text class="time">{
  
  {item.publishTime | formatTime}}</text>
        <text class="comment-count">{
  
  {item.commentCount}}评论</text>
      </view>
    </template>
  </uni-card>
</template>

<script>
export default {
  filters: {
    formatTime(value) {
      // 时间格式化逻辑
    }
  },
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  methods: {
    readNews(id) {
      this.$emit('read', id)
    }
  }
}
</script>

<st