巧用tab组件实现APP的布局效果
1. 版本说明
|
iOS/Android支持版本 |
jar包版本 |
|
8.4及往后版本 |
2017年4月1日 |
2. 描述
tab布局能避免多层次钻取与返回,可以在一个报表内部进行切换,钻取层数如果过多的话,看报表的人的操作体验就会下降很多,这时就可以选用tab组件。
3. 实际效果
新建一张表单,首先在表单中拖入tab组件,然后在第一层级的tab组件中再添加新一层的tab组件,并在第二层tab组件中添加报表块组件,通过表单组件的参数联动,即可实现不同tab系列下不同维度的数据分析。
报表样式设计如下:
我们以行业榜单中的手机行业举例来说明组件间的参数联动,其他tab页的设置方法相同。
新建一个内置数据集手机,其中时间段包含月度、季度和年度。
拖入两个报表块,左侧的为report0,右侧的是report1,左边的报表块(report0)界面设置如下:
右击A1单元格,点击超级链接,进入超级链接窗口,点击“+”号,添加当前表单对象,表单对象为report1,参数a的值为月度,表示当参数为月度的时候,report1中的数据为月度的数据,再添加一个当前表单对象,表单对象为report0,参数line的值为1,表示line的值为1的,report0进行刷新。
A2单元格超级链接中的参数a为季度,line的值为2。
A3单元格超级链接中的参数a月年度,line的值为3。
其他设置均与A1单元格的超级链接设置相同。
右击A1单元格,点击条件属性,弹出条件属性对话框,公式为$line = 1时,背景色为蓝色,字体色为白色,如下图所示:
A2单元格的条件属性为$line = 2 时,背景色为蓝色,字体色为白色。
A3单元格的条件属性为$line = 3 时,背景色为蓝色,字体色为白色。
右边的报表块(report1)界面设置如下:
B2单元格设置了过滤,显示参数a的值时的数据,如下图:
A2单元格中的=seq()为序号公式,根据B2排序,所以A2单元格的左父格为B2。
并且A2单元格设置了条件属性,是为了实现隔行换色,如下图所示:
至此,第一个tab页就设置完成,其他tab页与上述步骤相似,就不一一赘述了。
这时,可以看到在同一个界面中可以切换多个布局,减少了层层钻取的烦恼。
点击预览后,可以看到描述中的效果。
注:在表单body中移动端属性手机重布局的勾选要去掉。
注:在app中适用需要点击模板>移动端属性,选择HTML5解析。
巧用tab组件实现APP的布局效果的更多相关文章
- 基于vue与vux做的可滑动tab组件(附源码)
背景 前不久,刚完成了一个商品列表+购物车功能的页面,因为一级商品分类在顶部tab中显示,可滑动,间距可定制,如下图所示: 定制的tab需求如下: 1. 每个tab-item的间距是相同的,可定制 2 ...
- 基于sticky组件,实现带sticky效果的tab导航和滚动导航
上文提供了一个改进版的sticky组件,并将演示效果应用到了自己的博客.有了类似sticky的这种简单组件,我们就可以在利用它开发更丰富的效果,比如本文要介绍的tab导航和滚动导航.实现简单,演示效果 ...
- 关于elementUi tab组件路由跳转卡死问题
好久没来了,周五项目终于要上线了(*^▽^*),上线之前测出一个很恶心的bug真真是... 项目:Vue + elementUi 后台管理项目 问题描述:登录后首次通过侧边栏路由跳转到主页面有ta ...
- 【Android Studio安装部署系列】二十八、Android Studio查看其它APP的布局结构
概述 日常使用别家的APP过程中,会遇到一些比较好看的布局,这时候我们就想学习一下别人的布局结构,以便参考. (1)手机连接电脑.设置手机为USB调试模式 参考<[Android Studio安 ...
- JGUI源码:Tab组件实现(9)
程序界面效果如下 Tab组件由多个TabItem组成,超出部分隐藏,可以通过左右按钮滑动显示出来 1.封装 // 初始化内容 $(function () { J.JTab($(".jgui- ...
- Web Components实践开发Tab组件
本文是对web components的一次实践,最终目的是做出一个tab组件,本文涉及Custom Elements(自定义元素).HTML Imports(HTML导入).HTML Template ...
- Delphi for iOS开发指南(8):在iOS应用程序中使用Tab组件来显示分页
Delphi for iOS开发指南(8):在iOS应用程序中使用Tab组件来显示分页 在FireMonkey iOS应用程序中的Tab Tab由FMX.TabControl.TTabControl定 ...
- 046——VUE中组件之使用动态组件灵活设置页面布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue-music 关于基础组件 (Tab组件)
定义在项目的基础组类别的 tab组件中,定义一个tab切换数量的数组 和一个currentIndex 当前高亮索引 的props,当前高亮(active)的类等于currentIndex === ...
随机推荐
- java执行程序的内存分析系列专栏二之static变量和方法内存分析
昨天写了简单的聊了下java执行程序时简单的内存划分,今天我们接着往下聊,聊聊static变量和方法的内存分析. 1.static变量和方法的第一个特性内存分析 statiic变量和方法的第一个特性能 ...
- 【Android Developers Training】 55. 序言:高效显示位图
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- 新技术探究之 GraphQL
What? GraphQL 是一种类似于 SQL 的结构化查询语言,由 facebook 于2012年创造,于2015年开源.SQL 在服务端定义,GraphQL 在客户端定义,也就是说 GraphQ ...
- 关于一点jeesite
最近刚接触jeesite 深深被这个功能强大的框架所折服,虽然其中有一些地方还不完善,但也不妨碍我们通过jeesite提高我们java水平的大门. 这两天在网上一直在找关于jeesite的文章,看来看 ...
- 入门Android开发
一个工作1年多一点的前端狗,由于公司需要,开始接触Android,也是第一次写博客,以后学到的技术每天都会写篇博客,让我们一起进步. Android 系统开发应用程序,为我们提供了哪些东西. 一.四大 ...
- KBEngine简单RPG-Demo源码解析(3)
十四:在世界中投放NPC/MonsterSpace的cell创建完毕之后, 引擎会调用base上的Space实体, 告知已经获得了cell(onGetCell),那么我们确认cell部分创建好了之后就 ...
- VB6之图像灰度与二值化
老代码备忘,我对图像处理不是太懂. 注:部分代码引援自网上,话说我到底自己写过什么代码... Private Declare Function GetBitmapBits Lib "gdi3 ...
- 元组-tuple功能介绍
#元组 不可变类型 相当于只读的列表,不可被修改,不可被修改哦 ##创建元组最后加,最后加, 形成良好的习惯 """ tuple() -> empty tuple ...
- Codeforces Round #424 (Div. 2, rated, based on VK Cup Finals)A B题
当时晚上打CF时候比较晚,加上是集训期间的室友都没有晚上刷题的习惯,感觉这场CF很不在状态.A题写复杂WA了一发后去厕所洗了个脸冷静了下,换个简单写法,可是用cin加了ios::sync_with_s ...
- python新手之2变量
变量 变量是将储存的值保存在内存中.当声明一个变量的时候会在内存中开辟一个储存内容的位置. 基于变量的数据类型,解释器分配内存空间并决定储存的内容.因此我们可以通过变量分配不同的数据类型,可以在变量中 ...