可快速将默认列表页转为卡片式布局：先确认页面支持卡片切换，若无“布局模式”选项需升级为卡片容器；推荐右键转换并绑定数据；再编辑卡片内容、绑定字段并格式化；最后设置列数、间距及交互跳转。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
想把码上飞生成的默认列表页快速转成更直观、更易点击的卡片式布局，不需要改一行代码，也不用等开发排期。
确认当前页面是否支持卡片切换
进入码上飞项目编辑界面 → 点击左侧导航栏中目标页面（如「商品列表」或「服务展示」）→ 查看右侧属性面板顶部是否有「布局模式」下拉选项。若无此选项，说明该页面由基础列表组件生成，需先升级为「网格容器」或「卡片容器」组件；【未升级前强行调整样式会导致交互失效或数据不绑定】。
这一步必须做，跳过会白忙活半小时。
替换为卡片容器并绑定数据
方法一：直接拖入新容器
在左侧组件库搜索「卡片」→ 拖一个「卡片容器」到画布空白区 → 点击该容器 → 右侧属性面板中找到「数据源」→ 点击「绑定已有数据」→ 选择原始列表所用的数据表（如“goods”或“services”）→ 勾选「自动映射字段」。
方法二：就地转换（推荐）
选中现有列表组件 → 右键 → 选择「转换为卡片容器」→ 系统自动保留原数据绑定关系和字段映射 → 此时每条记录会生成一张独立卡片，但默认只显示标题和缩略图。
注意：如果原列表用了自定义字段渲染逻辑（比如拼接价格+单位），转换后需手动在卡片内对应区域重新配置字段表达式，否则会显示为空。
调整卡片内部结构与样式
第一步：双击某张卡片进入编辑态 → 删除默认占位文字和图片 → 在需要的位置拖入「文本组件」或「图片组件」。
第二步：选中文本组件 → 右侧属性面板中点击「字段绑定」图标 → 从下拉菜单中选择对应字段（如“name”、“price”、“desc”）→ 若需格式化（如价格加¥符号），在字段绑定后追加表达式：`"¥" + price`。
第三步：调整卡片尺寸与间距 → 选中卡片容器 → 右侧「布局设置」中修改「列数」（建议设为2～3）、「卡片宽度」（固定值或百分比）、「内边距」和「卡片间隙」→ 实时预览效果，直到符合手机端拇指点击习惯。
这一步调不好，用户在小程序里要点两三次才能点中，体验直接掉档。
添加卡片交互反馈
选中任意一张卡片 → 右侧属性面板中找到「交互动作」→ 点击「添加动作」→ 类型选「跳转页面」→ 目标页选择「商品详情」→ 参数绑定勾选「传递当前行ID」。
再给卡片加个悬停阴影（仅网页端生效）：在卡片容器的「样式」→「状态样式」中开启「鼠标悬停」→ 设置box-shadow值为 `0 4px 12px rgba(0,0,0,0.1)`。
不做这步，卡片看起来就是静态图，用户感知不到可点击。
