[App]移动端交互

  • 文档创建者:印然
  • 编辑次数:44次
  • 最近更新:Carly 于 2020-07-30
  • 1. 报表滚动

    CPT 表格过宽或者过高的时候(设置不自适应的情况下),通过上下左右滑动进行查看。

    上下滑动效果如下图所示:

    222

    2. 按钮刷新

    用户可点击「刷新按钮」对模板进行刷新,如下图所示:

    image.png

    注:有关刷新按钮的设置及说明请参考 其它 中的 2.1 章节。

    3. 手势缩放

    1)普通报表和决策报表中,支持双指和双击缩放,如下图所示:

    1574061894475921.gif

    2)允许双击/双指缩放的逻辑如下表所示:

    注1:决策报表使用「自适应布局」时,双指缩放没有效果。

    注2:决策报表使用「绝对布局」时,双指缩放仅对报表块有效,图表交互使用自带的交互按钮。

    JAR 包版本App版本设置何时允许缩放
    2019-12-05 前10.4.46 版本前无设置按钮默认可双击/双指缩放
    2019-12-05 前10.4.46 版本后
    2019-12-05 后10.4.46 版本前有设置按钮,不生效
    2019-12-05 后10.4.46 版本后有设置按钮,生效选中「允许双击/双指缩放」按钮默认可双击/双指缩放
    不选中「允许双击/双指缩放」按钮

    普通报表:

    • 不支持双击/双指缩放

    决策报表:

    • 1)普通报表:不支持双击/双指缩放

    • 2)决策报表:一般不支持双击/双指缩放,以下情况除外

    • 组件放大后,仍然支持双击/双指缩放

    • 重布局横屏下,仍然支持双击/双指缩放

    • 决策报表下仅存在单个组件,则仍然支持双击/双指缩放

    4. 左侧右滑动退出

    移动端增加手势退出,手指贴着左侧边,向右滑动的话做退出操作。

    目前支持左滑退出的地方有:报表界面(不包括参数界面)、决策报表界面、二级目录界面、设置界面。

    注1:左右滑动不支持翻页操作。 

    注2:仅 iOS 支持左滑退出功能。

    222

    5. 组件激活

    手机点击该组件,即实现组件激活,激活以后组件像两边延伸,组件有阴影效果(重布局横屏下组件默认处于激活状态),如下图所示:

    注:「单个/全局组件选中激活」功能设置与具体效果,请参见:[通用]组件选中激活


    222

    6. 横屏切换

    6.1 切换效果

    6.1.1 重布局

    • 重布局 下横屏切换,效果如下图所示:

    2020-07-01_12-08-02.gif

    • 重布局下横屏只显示单个组件。

    • 重布局横屏下支持左右切换组件。

    6.1.2 保留布局

    保留布局 下横屏切换,效果如下图所示:

    2020-07-01_12-11-32.gif

    保留布局手机上横竖屏切换逻辑不变,横屏后保留布局显示。

    注:10.0 HTML5 端 暂不支持横屏效果

    6.2 横屏切换逻辑

    6.2.1 参数设置

    JAR 包在 2019-12-05 之前的设计器,默认允许横竖屏切换。

    JAR 包在 2019-12-05 之后的设计器,可手动设置切换逻辑参数,设置url+参数

    参数逻辑如下表所示:

    参数App-phoneApp-iPadHTML5 端

    无参数

    App/微信参数:fine_orientation=auto

    支持横竖屏切换
    支持横竖屏切换固定竖屏
    App/微信参数:fine_orientation=landscape

    首页竖屏,固定横屏

    固定横屏固定横屏
    App/微信参数:fine_orientation=portrait固定竖屏

    首页横屏,固定竖屏

    固定竖屏

    注:HTML5 端仅在钉钉单点中,横竖屏参数才会生效,其他情况都不会生效。

    6.2.2 横屏返回设置

    横屏返回方式如下:

    环境模板
    返回方式
    iOS普通模板底部工具栏「返回」按钮
    网页链接左侧右滑退出

    Android

    普通模板底部工具栏「返回」按钮
    系统返回键
    网页链接系统返回键

    注:App 及 HTML5 移动端展现插件在10.4.76及之后的版本,且未设置切换逻辑参数为「fine_orientation=landscape」的模板,横屏返回方式如下:

    环境返回方式
    iOS

    左侧右滑退出

    切换至竖屏返回

    Android

    系统返回键

    切换至竖屏返回

    7. 组件放大

    组件放大需要设置 全屏按钮,设置后,移动端查看模板,按钮悬浮在组件右上角,如下图所示:

    222

    动态效果如下图所示:

    222

    重布局横屏下不支持放大,重布局竖屏、保留布局横竖屏都支持放大(不包括 Pad);

    放大状态下不支持横竖屏切换,横竖屏切换时,关闭放大状态,再进行横竖屏切换。

    8. 翻页

    8.1 普通报表翻页

    手机上 CPT 翻页,点击下方的翻页按钮,如下图所示:


    222

    动态效果如下图所示:
    222

    8.2 决策报表翻页

    手机决策报表的报表块只有在 放大状态 下才支持翻页(重布局竖屏放大、重布局横屏——等同于重布局横屏放大效果、保留布局竖屏放大、保留布局横屏放大),如下图所示:
    222

    动态效果如下图所示:
    222

    注:Pad 上翻页交互不变

    9. 跳转/联动/地图钻取/其他

    只有决策报表 重布局 下,跳转/联动/钻取交互统一。

      超级链接效果  
      图表超链-联动单元格  联动
      当前决策报表对象  联动
      网络报表  跳转
      网页链接    跳转
      动态参数  跳转
      JavaScript  其他
      邮件  其他
      钻取地图  钻取

    9.1 表格/图表跳转

    9.1.1 单个跳转链接

    当仅有单个跳转(多个跳转地址或者同时具有钻取、其他功能)时,点击具有跳转功能的字段 / 图表,则直接跳转到目标网页或报表,如下图所示:

    单个超链.gif


    9.1.2 多个跳转链接

    如果有多个选择时,无论是报表块的跳转还是图表块的跳转,都弹出提示框,可选择跳转目的或别的功能,如下图所示:

    多个超链.gif

    9.2 联动

    决策报表中的联动,无论是否同时具有跳转、钻取、其他等任一功能,则联动效果都直接触发。如果有跳转、钻取、其他等超过一个功能,则会弹出跳转或者钻取的提示框,如下图所示:

    联动.gif

    9.3 地图钻取

    钻取地图,点击地图位置后实现钻取到下一层地图,点击上一层目录,即可实现上钻,如下图所示:

    地图.gif

    9.4 其他

    1)决策报表中的报表块里的其他,如果字段没有多种选择(多个其他或者同时具有跳转功能) ,则点击该字段直接触发其他效果。

    2)决策报表中的图表块里的其他,如果字段没有多种选择(多个其他或者同时具有跳转、钻取功能),则点击该字段直接触发其他效果。

    3)如果有多种选择,无论是决策报表里的图表块或是报表块,则弹出提示框,选择其他或别的功能,也可以取消。

    注:联动功能不论几个都没有提示,直接触发。

    下面做多种选择的演示。

    这里演示的 JavaScript 代码为:

    FR.Msg.toast("其他测试")

    具体效果如下图所示:

    其他.gif

    10. 决策报表图表数据点提示

    决策报表中的图表,开启数据点提示会显示在界面,手指按住在图表中拖动时,可以实时查看对应的数据点提示,动态效果如下图所示:

    提示.gif

    附件列表


    主题: 移动端应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!