WebBuilder 开发规范：Component 组件 autoScroll 滚动属性编码标准

1 文档目的统一所有项目页面滚动交互实现方案标准化Wb.Component组件内容溢出处理逻辑。规避项目内实现方案不统一、随意自定义 CSS 样式、浏览器兼容异常等问题提升交付页面标准化程度降低后期 BUG 修复与系统维护成本。 适用范围所有基于 Geejing WebBuilder 开发的政企数字化平台、制造企业管理系统、金融业务平台、OA、CRM、数据大屏项目。 本文仅约束 Wb.Component 自定义 HTML 组件Viewport、Container 布局容器内置 autoScroll 属性拥有独立规范不适用本文档。2 属性基础定义属性名称autoScroll生效条件组件必须显式定义height固定高度无固定高度时滚动逻辑无法触发属性失效。 可选枚举值不声明 autoScroll默认overflow:visible内容向外溢出。约束仅允许 Demo 测试页面使用正式业务页面禁止使用。falseoverflow:hidden溢出内容直接截断隐藏true强制启用纵向滚动永久展示滚动条auto鼠标悬浮后显示滚动条政企后台业务系统推荐标准方案hide隐藏滚动条保留滚轮、触控滚动交互可视化大屏专用方案3 强制开发约束正式业务页面中使用 Component 组件承载文本内容必须显式配置 autoScroll禁止依赖默认溢出模式。滚动配置与业务场景严格匹配遵循团队统一选型标准业务表单、档案详情、后台台账页面统一标准autoScroll:auto可视化驾驶舱、数据大屏展示模块统一标准autoScroll:hide摘要卡片、静态提示说明模块统一标准autoScroll:false操作日志、单据详情、超长备注区域统一标准autoScroll:true禁止多层嵌套滚动容器避免出现双重滚动交互影响用户操作体验。优先使用平台原生 autoScroll 属性管控溢出逻辑。禁止私自自定义 CSS 覆盖平台滚动样式若存在特殊定制需求必须提交技术评审留存变更记录。同一个页面内同类功能组件滚动配置必须保持一致保证交互体验统一。4 标准复用模板所有新建 Component 组件推荐使用如下模板开发人员按需调整 cid、高度、html 内容json{ _icon: component, text: descComp, cls: Wb.Component, properties: { cid: descComp, html: , height: 8em, frame: true, padding: true, autoScroll: auto } }5 页面测试规范组件开发完成页面发布前必须完成两类边界测试内容边界测试①内容长度小于组件高度②内容长度大幅超出组件高度确认溢出表现符合预期。浏览器兼容性测试Chrome、Edge、主流国产信创浏览器面向移动端的响应式页面额外增加移动端真机测试。6 问题排查标准流程当滚动属性出现异常时按照顺序逐项排查检查组件是否配置固定 height确认属性名称 autoScroll 拼写无误大小写严格匹配检查上层父容器是否存在 overflow 样式限制排查是否多层滚动容器嵌套引发交互冲突清除浏览器缓存重新预览页面验证效果。7 版本与维护说明本规范适用于 WebBuilder 企业级 Web 快速开发平台当前正式版本后续平台组件属性迭代更新时同步修订本文档。所有项目实施、前端开发人员必须熟知本规范新项目落地严格执行存量系统迭代优化时逐步对齐统一标准。