在码上飞中,图片跳转需先绑定交互动作:选“跳转页面”并指定已存在的详情页,支持携带参数;弹窗方案可用透明按钮触发或AI生成模块;排查要点包括启用交互、目标页已保存、参数字段名严格匹配。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

让图片点击后跳转到详情页
在码上飞AI生成的小程序或网页应用中,想让首页轮播图、商品缩略图、名片头像等图片点击后跳转到对应详情页,不需要写跳转逻辑代码,但必须提前在页面结构中为图片绑定可交互行为。
第一步:进入「页面编辑器」→ 点击目标图片组件 → 右侧属性栏找到【交互动作】→ 展开下拉菜单,选择「跳转页面」。
第二步:在跳转配置弹窗中,从「目标页面」列表里选中已存在的详情页(如 product-detail、card-info、news-detail),注意该页面必须已在项目中创建并保存过,【未创建的页面不会出现在下拉列表中】。
第三步:若需传递数据(比如点击某张产品图就打开对应ID的详情),勾选「携带参数」→ 在参数字段输入 key(如 id)→ 值类型选「当前数据源字段」→ 从下拉中选择该图片所在列表的数据项字段(如 item.id)→ 点击确认。
用图片触发自定义弹窗详情
当不需要整页跳转,而希望点击图片后在当前页弹出半屏/全屏详情浮层时,更适合用弹窗方案。这要求图片所在容器已接入数据源(如后台返回的卡片列表),否则无法动态渲染内容。
方法一:使用内置弹窗组件
在图片上方叠加一个「透明按钮」组件 → 设置按钮尺寸与图片完全重合 → 绑定「点击事件」→ 动作选「打开弹窗」→ 弹窗模板选「详情展示型」→ 数据源绑定为当前图片所在循环项(如 item)。
方法二:用AI对话直接生成带弹窗逻辑的模块
在码上飞对话框中输入:“给首页的4张推荐图添加点击弹窗,弹窗显示标题、描述、联系人和二维码,样式要适配手机竖屏”,AI会自动插入带遮罩层、关闭按钮、响应式布局的弹窗模块,并把图片与弹窗做一一映射。
图片跳转失败的常见排查点
图片点了没反应?先检查三处硬性条件:
① 图片是否被设置为「不可点击」(属性栏中「启用交互」开关是否关闭);
② 目标详情页是否已发布或至少保存过一次(未保存的页面在跳转列表中不可见);
③ 若使用参数跳转,确认数据源字段名拼写与后台返回字段严格一致,【大小写敏感,item.ID ≠ item.id】。











