样式与点击动作

选中画布上的组件后，右侧 样式 Tab 与 属性 中的 点击动作 是美化与交互的两类核心配置。

通用样式面板

所有画布组件共享同一套 样式 字段，单位默认为 rpx（响应式像素，750rpx ≈ 屏幕全宽）。

尺寸

字段	说明
宽度	留空为 auto；可填数字或百分比
高度	留空为 auto；图片、轮播等常需指定高度

外边距（margin）

上 / 右 / 下 / 左 四个方向，控制组件与周围内容的间距。

内边距（padding）

上 / 右 / 下 / 左 四个方向，控制组件 内部 内容与边框的距离。

背景与边框

字段	说明
背景色	支持透明（表单说明组件外层建议透明）
背景图	从媒体库选择；可选 铺满裁剪 / 完整显示 / 拉伸铺满
圆角	数字，rpx
边框宽度	数字，rpx
边框颜色	颜色选择器

其他

字段	说明
透明度	0~1，默认 1
阴影	CSS 阴影字符串，如 0 4rpx 20rpx rgba(0,0,0,0.08)
溢出	默认 / hidden / visible

颜色选择器

点击色块打开取色器，支持：

• 预设色板
• 手动输入 HEX
• 透明色（部分场景）

---

列表 Section 的样式分层

笔记列表、圈子列表、笔记瀑布流 三类组件结构特殊：

样式 Tab 中的分组	作用对象
尺寸、外边距	整个列表区域（section 外壳）
内边距、背景、圆角、边框	每一条 卡片内部
属性 Tab 中的图标、字号、颜色等	卡片内具体元素

面板顶部有灰色提示说明，避免误把卡片背景配在外层。

---

点击动作（clickAction）

带交互的组件（按钮、轮播项、金刚区图标、列表行等）可配置 点击动作。

在属性面板点击 点击动作 行，弹出动作选择器：

常见动作类型

类型	用途	需填写
跳转页面	打开 App 内某个页面	选择或输入页面路径
重定向	关闭当前页再打开	页面路径
切换 Tab	跳到底部某个 Tab	Tab 对应页面路径
重启应用栈	清空页面栈后打开	页面路径
打开外链	H5 / 小程序 webview	URL
打开小程序	跳转其它小程序	AppID、路径
预览图片	大图预览	图片地址
复制文本	复制到剪贴板	文本内容
拨打电话	调起拨号	号码
打开地图	导航到坐标	经纬度、名称
发布弹窗	打开发布菜单	一般用于 TabBar 中间按钮
无动作	仅展示	—

选择页面路径

动作类型为页面跳转时，点击 选择页面，从系统内置路由列表中选：

• 首页、发现、消息、我的
• 笔记详情、圈子详情、搜索
• 自定义页面（需带 page_type 参数）
• 外卖、闲置等业务页（需模块已开通）

也可手动输入路径与参数。

配置示例

金刚区「二手闲置」图标 → 闲置列表

1. 选中金刚区组件 → 展开对应图标项
2. 点击动作 → 跳转页面 → 选择闲置相关页面

轮播图第一张 → 活动自定义页

1. 轮播图 → 图片 1 → 点击动作 → 跳转页面
2. 选择自定义页并带上正确的 page_type

---

筛选标签与列表联动

筛选标签 组件有两种内容模式（属性面板中 内容模式）：

模式	行为
API 联动	切换 Tab 时，下方 笔记列表 / 圈子列表 / 瀑布流 按筛选条件刷新数据
Tab 面板	每个 Tab 下可独立配置一小段画布内容（适合静态分区）

使用 API 联动时：

1. 列表 section 与筛选标签各配置相同的 联动 Key（属性面板中 filterLinkKey）
2. 筛选标签每个 Tab 可设排序、分类、话题 ID 等筛选参数

圈子页（forum）联动目标 固定为笔记，不可改为圈子。

---

表单组件的内嵌样式

表单类组件（单行输入、选项等）除 样式 Tab 外壳 外，属性 Tab 内还有分组：

• 标题样式（字号、颜色、是否显示）
• 输入区样式（边框、圆角、背景）
• 选项 pill 样式、滑块轨道颜色等

表单说明 组件：提示条背景色在 属性 → 说明样式 配置；样式 Tab 背景 仅作用于外层容器，建议保持透明。

---

样式调试技巧

1. 先搭结构再微调：先用默认样式排好组件顺序，最后统一改间距
2. 用模块标题分区：长首页用「模块标题」组件分隔区块
3. 列表放底部：笔记列表等数据组件尽量靠下，上方放运营位
4. margin 留白：模块之间常用 marginTop: 20~30 rpx
5. 预览 ≠ 真机：工具栏预览为截图；最终以 App 内效果为准

---

下一步

• 基础元素组件
• 布局导航组件
• TabBar 配置