1．前言
物联网智慧化场景中，系统的WEB前端界面一般分为三大类：
大屏展示类（包括2D大屏报表、工业组态）
数字孪生类（包括BIM运维、3D可视化驾驶舱）
后台管理类（包括业务功能平台、表单配置管理等）
其中前两者均以可视化效果为主，偏展示；后者则以内容交互和布局为主，偏功能。
后台管理系统的搭建，主流技术手段是前后端分离开发，前端采用vue结合element－ui等后台管理模板。
目前比较火的有低代码平台（也叫轻代码、0代码）。市面上一部分低代码平台是解决前两者（大屏报表和3D展示），另一部分则主打前后端整体配置、轻代码化。
低代码搭建管理系统，各家五花八门，从前端表单拖拽，后台业务配置，看似十分强大，可实际跟自身业务结合就比较尴尬。
场景如下：已有前后端分离的系统，后端功能成熟（或已有现成的开发框架）、接口完备，且属于核心业务系统，需团队长期开发维护，不是“用完即走”的外包定制。
现需升级前端，更新用户体验、定制用户界面，或基于后端接口搭建新的应用模块，只需要前端低代码，而且有代码开发的灵活性和效果，能减少前端开发工作即可。
IOTOS物联中台在v4．0前端升级时就遇到该问题，是通过vue重新编写前端，还是通过第三方低代码工具搭建？
最后选择了第三条路——在已有的物联组态中增加低代码能力（核心是组件库），专注于解决后复杂的管理平台WEB前端的0代码搭建，并基于此打造应用平台中内置的设备管理等基础应用。
目标是实现类vue渐进式模块化的开发方式，拖拽配置、逐层嵌套，实现基础组件、复合组件、功能模块的0代码搭建，结合多重模式布局，实现局部到整体的极速配置，为前端工程师省力（只需开发和维护组件），为后端工程师赋能（全栈）。
2．需求
回归主题，常见组态页面运行后对屏幕尺寸的适应，要么按照设定固定宽高显示，要么按比例或填充等方式缩放。
对于长页面（如下图所示）都是不合理的，通常需要横向宽度自适应填充，高度则超出窗口的区域能上下滑动（滚动）。
本节重点讲如何通过滑动组件，嵌套加载长页面，即可满足需求的展示和交互特性，实现通过上层组件嵌套和配置，即具备新的交互特性，“渐进式”增量化开发的特性在低代码中可视化“搭积木”过程中得以体现。
3．运行效果
3．1常规效果 ×（等比压缩适应窗口）
整体缩放直至全屏填充，内部组件比例变形严重，效果不好。
3．2常规效果 ×（原始比例填充窗口）
按比例缩放展示到窗口区域，能保持原始比例，但被缩小了且留有很多空隙，效果不好。
3．3理想效果 √（经过滑动组件嵌套）
保持原始比例，纵向超出显示窗口的部分，自动加上滚动条上下滑动展示，达到目标效果。
4．实现步骤
4．1新建长页面并布局
4．2新建页面拖入滑动组件
4．3滑动组件嵌入长页面
4．4运行
效果参见3．3
5．使用说明
详细配置略，见使用文档。
本文初步体验了在不改变底层页面或组件的前提下，套上一层新的组件，能够“渐进式”、“增量化”加上新的功能和特性，比如上面长页面只管自身的内容设计，滑动组件只管上下滑动功能，进行嵌套后就实现了长页面 ＋ 滑动的功能。
更进一步，尝鲜介绍侧边菜单栏组件（menuSidebar），在长页 ＋ 滑动 ＋ 菜单栏嵌套之后，会产生什么样的效果呢？如图所示：
详情见下一篇文章《侧边菜单栏组件menuSidebar－center——物联组态低代码构建WEB管理平台前端之必备组件》
附：IOTOS物联网中间件平台 v4．0（即将上线） 架构图：（点击在线查看滚动长页面）
