当前位置：首页 > uni-app

好看的uniapp列表

2026-03-05 12:59:31uni-app

好看的uniapp列表设计方法

卡片式列表
使用卡片布局增强视觉层次感，每个卡片包含图片、标题和简短描述。设置圆角阴影效果提升质感，背景色与主色调协调。

瀑布流布局
适合图片或商品展示，通过交错排列打破常规网格的单调性。结合懒加载优化性能，动态计算图片高度实现流畅滚动。

分组列表
按分类添加分组标题，搭配吸顶效果方便导航。标题区域使用渐变背景或图标装饰，与内容区形成视觉区分。

左图右文样式
左侧固定宽度图片，右侧弹性文字区域。图片采用圆形或圆角矩形，文字部分合理控制行数避免溢出。

交互增强设计
添加滑动删除、置顶等手势操作，通过动画反馈提升体验。长按触发编辑状态，配合微交互提高用户感知。

实现示例代码

<template>
  <view class="card-list">
    <view v-for="(item,index) in list" :key="index" class="card-item" @click="handleClick(item)">
      <image class="card-image" :src="item.image" mode="aspectFill"></image>
      <view class="card-content">
        <text class="card-title">{{item.title}}</text>
        <text class="card-desc">{{item.desc}}</text>
      </view>
    </view>
  </view>
</template>

<style>
.card-list {
  padding: 20rpx;
}
.card-item {
  display: flex;
  margin-bottom: 30rpx;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}
.card-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 8rpx;
}
.card-content {
  flex: 1;
  padding: 20rpx;
}
.card-title {
  font-size: 32rpx;
  font-weight: bold;
}
.card-desc {
  font-size: 24rpx;
  color: #666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>