反馈已提交

网络繁忙

Pad自适应

  • 文档创建者:Carly
  • 历史版本:5
  • 最近更新:April陶 于 2022-04-08
  • 1. 概述

    1.1 版本

    报表设计器版本
    App
    HTML5 移动端展现插件
    11.0V11.0V11.0

    1.2 应用场景

    移动办公场景下,用户携带电脑非常不便,手机查看工程阅读困难,Pad成为了最佳的移动办公设备。

    为了减少开发和维护耗时,手机和Pad端往往共用一套模板,两者分别自适应展示即可。

    1.3 功能简介

    对于移动端决策报表,配置了 移动端自适应 后,Pad 端可自适应展示,与手机端略有不同。

    2. Body 组件

    移动端布局
    body布局组件缩放
    预览效果
    重布局--一行一个组件,可能出现上下滚动条
    保留布局自适应布局横向自适应宽高等比例缩放,横向自适应充满,纵向可能出现滚动条
    双向自适应宽高等比例缩放,横向/纵向自适应充满
    绝对布局
    固定大小裁剪四周空白部分后,宽高等比例缩放,横向自适应充满,纵向可能出现滚动条
    适应区域裁剪四周空白部分后,宽高等比例缩放,横向/纵向自适应充满

    3. 报表块

    3.1 移动端重布局

    3.1.1 组件预览效果

    是否单个报表块
    报表块自适应预览效果

    -单个报表块充满body
    横向自适应宽度充满,高度自适应,支持最大高度限制
    纵向自适应有最大高度限制
    双向自适应宽高自适应充满,支持最大高度限制
    不自适应高度自适应,支持最大高度限制

    3.1.1 组件冻结效果

    报表块自适应模板中是否仅单个报表块组件是否限高行冻结效果列冻结
    横向自适应-支持不支持
    支持
    不支持
    纵向自适应--不支持支持
    双向自适应--不支持不支持
    不自适应
    -支持支持
    支持
    不支持

    3.2 移动端保留布局

    3.2.1 组件预览效果

    body布局组件缩放报表块是否占据整行报表块自适应预览效果
    自适应布局横向自适应横向自适应宽度充满,高度自适应,支持最大高度限制
    纵向自适应有最大高度限制
    双向自适应宽高自适应充满,支持最大高度限制
    不自适应高度自适应,支持最大高度限制
    -和pc端一致,宽高按比例分配
    双向自适应--
    绝对布局---

    3.2.2 组件冻结效果

    分类报表块自适应是否限高行冻结
    列冻结
    组件横向自适应,且报表块为单行报表块
    横向自适应
    支持不支持
    不支持
    纵向自适应-不支持支持
    双向自适应-不支持不支持
    不自适应支持支持
    不支持
    其他情况下横向自适应-支持不支持
    纵向自适应-不支持支持
    双向自适应-不支持不支持
    不自适应-支持支持

    4. 图表块

    4.1 移动端重布局

    图表宽高预览效果
    表单画布宽度≤高度-横向充满,宽高等比缩放

    表单画布宽度>高度

    图表宽度≤设备宽度横向充满,宽高等比放大
    图表宽度>设备宽度

    面积相等原则,高度拉长

    若有最大高度限制,最大高度为显示区域的80%

    单个图表块-充满屏幕

    4.2 移动端保留布局

    布局样式预览效果
    横向自适应

    若图表块与其他组件并列一行,与 PC 端一致,宽高等比缩放

    若图表块占据整行,高度自适应,与报表块效果一致

    双向自适应与 PC 端一致,宽高按比例分配
    固定大小
    适应区域

    5. 控件

    5.1 移动端重布局

    控件预览效果
    标签控件内容自适应高度
    文本域控件固定高度
    单选按钮组/复选框组(内容≤5项)内容自适应高度
    单选按钮组/复选框组(内容>5项)固定高度,内容可滚动
    其他控件固定高度

    5.2 移动端保留布局

    分类控件预览效果

    自适应布局-横向自适应

    绝对布局-固定大小

    标签控件控件宽高等比缩放,内容超出显示区域可滚动
    文本域控件控件宽高等比缩放,内容超出显示区域可滚动
    单选按钮组/复选框组

    控件宽高等比缩放

    超出显示区域可滚动,不足显示区域则根据内容自适应高度

    其他控件

    控件宽高等比缩放

    但有最大和最小高度显示,宽度中控件内容显示不下则截断

    自适应布局-双向自适应

    绝对布局-适应区域

    标签控件控件宽高按比例分配,内容超出显示区域可滚动
    文本域控件控件宽高按比例分配,内容超出显示区域可滚动
    单选按钮组/复选框组

    控件宽高按比例分配

    超出显示区域可滚动,不足显示区域则根据内容自适应高度

    其他控件

    控件宽高按比例分配

    但有最大和最小高度显示,宽度中控件内容显示不下则截断

    6. Tab块

    6.1 移动端重布局

    是否单个

     Tab块

    Tab中是否

    为单个组件

    Tab 预览效果Tab 中组件预览效果
    单个 Tab块自适应充满,高度固定按照对应组件在重布局下单个组件的显示的效果来显示
    单个 Tab块自适应充满,高度固定

    按照对应组件在重布局下非单个组件的显示的效果来显示

    高度超出屏幕则在 Tab 里出现上下滚动条

    -

    Tab 块的显示高度根据当前Tab页中的组件内容自适应,Tab内无滚动条

    切换 Tab 页,可能会引起tab高度的变化

    按照对应组件在重布局下非单个组件的显示的效果来显示

    6.2 移动端保留布局

    布局样式tab预览效果
    横向自适应
    • 若Tab 块单独成行,Tab 块中报表块单独成行,根据当前 Tab 页中的组件内容自适应,Tab 内没有滚动条

    • 其他情况下,Tab 块宽高等比缩放,Tab 内没有滚动条

    双向自适应Tab块宽高按比例分配,Tab内没有滚动条
    固定大小Tab块宽高等比缩放,Tab内没有滚动条
    适应区域Tab块宽高按比例分配,Tab内没有滚动条

    7. 组件隐藏

    7.1 普通隐藏

    图表块、报表块、控件的 PAD 端隐藏情况如下表所示:

    注:Tab块不支持隐藏。

    是否可见布局样式预览效果
    可见-组件正常显示
    不可见重布局组件隐藏,不占位
    不可见绝对布局组件隐藏,占位
    不可见自适应布局

    组件隐藏,组件位置会被周围组件自适应充满,组件不占位

    7.2 JS 隐藏组件

    JS 控制组件是否可见,PAD 端生效情况如下表所示:

    布局样式控件位置JS事件触发效果
    重布局-

    JS可以控制组件可见不可见

    当不可见时下方组件自动向上填充

    保留布局-横向自适应控件占整行
    控件不占整行

    JS可以控制组件可见不可见

    当不可见时组件位置留空,其他组件不会自适应充满

    保留布局-双向自适应-
    保留布局-固定大小-
    保留布局-适应区域-

    7.3 Tab 中组件隐藏

    Tab 中的图表块、报表块、控件,PAD 端隐藏情况如下表所示:

    是否可见布局样式预览效果
    可见-组件正常显示
    不可见重布局组件隐藏,不占位
    不可见保留布局

    组件隐藏,占位

    附件列表


    主题: 移动端应用
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持