[通用]移动端 Tab 布局

编辑
  • 文档创建者:jiangsr
  • 浏览次数:3835次
  • 编辑次数:11次
  • 最近更新:Kevin-s 于 2019-11-06
  • 1. 概述

    1.1 版本

    移动端版本  HTML5 移动端展现  
    App10.1 及以上V6.0 及以上

    关于「HTML5移动端展现」插件请参考 HTML5移动端展现

    1.2 设计方案

    支持单个 Tab 标题样式设置,支持 Tab 自定义显示隐藏。

    注1:暂不支持自动轮播。

    注2:移动端预览步骤请参考 移动端预览

    2. 单个 Tab 标题样式设置

    2.1 模板设计

    在 FineReport 设计器中,点击文件>新建决策报表,在决策报表中拖入 Tab 块,并增加 Tab 块,此步骤可参考 Tab块

    选中「标题1」,在右侧属性面板中「样式」中选择自定义,为「标题1」设置初始背景和选中背景。如下图所示:

    1572856846850987.png

    支持的属性及效果如下表所示:

      属性是否支持  说明  
    标题样式支持

    支持设置样式为自定义

    初始背景支持只支持颜色,如果设置为图片,则识别为默认
    鼠标浮动背景不支持
    鼠标点击背景支持只支持颜色,如果设置为图片,则识别为默认

    2.2 移动端效果

    1)App

    1572876814869954.jpg


    2)HTML5

    1572876643276835.jpg

    3. 单个 Tab 自定义显示隐藏

    3.1 模板设计

    在 FineReport 设计器中,点击文件>新建决策报表,在决策报表中拖入 Tab 块,并增加 Tab 块,此步骤可参考 Tab块 。

    选中「标题1」,在右侧属性面板中,不勾选「可见」,如下图所示:

    1572858473773384.png

    注:自 App9.3 开始,支持此方法来实现单个 Tab 块自定义显示隐藏。

    同时还提供 JS 接口,详细点击 [通用]setTabVisible 。

    3.2 移动端效果  

    1)App

    1572858709522421.jpg

    2)HTML5

    1572858741516843.jpg

    4. 整个 Tab 自定义显示隐藏

    4.1 模板设计

    1)打开模板 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\analytics\financial2\生产库存分析.frm

    在右侧属性面板「控件设置」中,选择 tabpane0,设置控件大小为 0 ;或者拖动标题组件到上下线重合,即可隐藏 Tab 标题。

    如下图所示:

    114.png

    4.2 移动端效果

    1)App

    1572876220559966.jpg

    2)HTML5

    1572876238135632.jpg

    注:整个 Tab 标题隐藏时,「HTML5 移动端展现」插件版本若在 10.2.21 之前,HTML5 预览时是不能实现左右滑动切换 Tab 的。

    附件列表


    主题: 移动端入门
    标签: 暂无标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]