FR移动端使用技巧--tab组件,APP的布局效果我们也能做

楼主
帆软产品经理
关注我们移动端的番薯童鞋们一定已经了解过我们的布局与配色解决方案了
不了解?请戳http://bbs.fanruan.com/thread-84012-1-1.html

其中我们提到我们在制作移动端报表的时候要

避免多层次钻取与返回,试着尽量放在一个报表内部进行切换


钻取层数如果过多的话,看报表的人的操作体验就会下降很多,因为不知道现在自己已经下钻到哪一层,以及如何返回到第一层,

因此在报表制作的时候,可以多用tab的形式来将多个报表放在一个页面里面来实现,这样实用性更强,用户只需要少量的点击就能查看多维的数据了!

当初由于我们还不支持tab组件的实现方式,所以推荐大家使用表格的超级链接>动态参数来实现,

现在我们tab组件功能发布以及3个多月了,不知道大家有没有尝试过呢,这里小编就给大家带来利用tab组件制作移动端数据分析报表的强大效果!

当前市场上的移动端产品,都秉持者交互简单、操作简单的设计理念,许多客户在设计移动端报表的时候也把其作为移动端产品来开发,
让我们先来看看APP是怎么做的:
借用虎扑APP的数据功能作为参考,APP通过3层数据筛选标签,展现了NBA、CBA等不同赛事中不同统计维度的数据,同一个页面,可以展现10多种维度的结果



那如果用我们帆软设计器如何来实现呢?

首先在第一栏中拖入tab组件,作为第一大类
其次在第一层级的tab组件中再添加新一层的tab组件,并在第二层tab组件中添加报表块组件
通过表单组件的参数联动,即可实现不同tab系列下不同维度的数据分析(附件中会提供模板参考)


备注:要想达成这样的效果,需要注意两点

1、在表单body中去勾选重布局

2、
tab组件只支持在H5解析下使用,如果您想在APP中达成效果需要下载H5插件同时勾选使用H5解析
表单支持html5方式解析-http://help.finereport.com/doc-view-1931.html


让我们来看看最终的效果吧,是不是还原度还很高呢?


最后彩蛋不能少:移动端tab组件支持标题和背景自定义的功能已经发布,请使用V3.0.6以上版本,然后再来看看最新的效果tab组件支持背景标题自定义啦


移动端解决方案完整工程打包下载:
链接: https://pan.baidu.com/s/1c2HFlAC 密码: axpy

往期移动端干货回顾:
【专题汇总】移动端解决方案



编辑于 2017-12-28 13:43  
编辑于 2017-12-28 13:44  
分享扩散:

沙发
发表于 2017-4-24 17:08:52
报表块边框粗细为无,H5预览时还是会显示边框?
板凳
发表于 2017-4-25 12:58:43
很漂亮,点32个赞!
地板
发表于 2017-4-26 11:56:38
5楼
发表于 2017-4-28 06:47:27
漂亮
6楼
发表于 2017-5-2 14:19:30
666
7楼
发表于 2017-5-8 20:03:23
下载的demo样式还是只有默认的呀,怎么可以做到文档中的效果呢?tab页签标题的高度、样式如何设置啊,楼主求解
8楼
发表于 2017-5-15 20:16:50
不错,不错
9楼
发表于 2017-5-18 17:35:59
10楼
发表于 2017-6-6 09:16:20
666果然是大神级别
11楼
发表于 2017-6-8 18:18:15
为什么我这边下载下来,然后放到服务器上,手机预览提示不支持tab组件呢
12楼
发表于 2017-6-9 08:05:41
设计器是刚更新的 2017-06-06
H5:是新移动端html5 V3.04
13楼
发表于 2017-7-11 15:59:55
求实例教程
14楼
发表于 2017-7-12 15:04:59

附件下载模板即可
15楼
发表于 2017-7-12 15:37:41
tab背景H5APP改不了,是个硬伤
16楼
发表于 2018-4-24 10:31:22
强大。下载看看
17楼
发表于 2018-10-18 22:07:15
tab背景H5APP改不了,是个硬伤
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

返回顶部 返回列表