找回密码
 立即注册

QQ登录

只需一步,快速开始

Tracy.Liu 讲师达人认证 悬赏达人认证 活字格认证
论坛元老   /  发表于:2018-8-31 17:48  /   查看:9059  /  回复:1
本帖最后由 willning 于 2022-8-15 15:29 编辑

重要提示

活字格在V8.0中,活字格提供“设置行列布局命令”,通过设置特定行“可见/不可见”,可直接解决该问题

帮助文档

============以下为旧版本的解决方案,适用于V7.0 Update 1及更早期版本============

这个帖子给大家介绍一下页面中表格的折叠展开效果是如何实现的。

老规矩,我们先来看看效果~
    表格折叠展开效果.gif

要实现就这功能,只要做好这两件事就OK啦~
1. 隐藏对应的表格
   实现这个功能的方法非常简单,就是做多个页面,在点击隐藏或显示时,跳转至对应页面模拟出隐藏或显示的效果。
    image.png599051208.png

2.保证在切换表格隐藏/显示状态后,滚动条不会跳转至顶部,而是保持当前浏览位置不变。
   熟悉活字格的朋友们都知道,活字格是一种单页应用程序(SPA),就是说整个应用其实只有一张WEB页面,只是在用户与应用程序交互时来动态更新该页面。所以说,在同一个页面中进行操作,滚动条本身就动。但是在活字格中,为什么会出现跳转至顶部的情况呢?这是因为虽说我们的活字格是一款SPA,不存在页面间的跳转(毕竟就一个页面),但是为了实现那种页面跳转的效果,我们在设计这个“页面跳转”功能时,人为让页面在“跳转”后回到顶端。
   了解了这个细节后,那就非常好办了,我们为了让他不回到顶部,那把这个回到顶部的功能干掉不就好了嘛~于是,我们可以做如下设置,就可以实现了~
    1)给每一个隐藏/显示,添加一段js代码
       image.png163146666.png
  1. window.oldscrollToMethod = window.scrollTo;
  2. window.scrollTo =function(){};
复制代码

   2)给每个页面的页面加载时命令中也添加一段js代码
       image.png674914550.png
  1. if(window.oldscrollToMethod){
  2.   window.scrollTo = window.oldscrollToMethod;
  3. }
复制代码

工程文件 福利demo-隐藏显示.fgcc (1.75 MB, 下载次数: 1248)




评分

参与人数 1满意度 +1 收起 理由
老菜鸟 + 1 不行呀,数据呢?页面修改的数据不全丢了?

查看全部评分

1 个回复

倒序浏览
Simon.hu讲师达人认证 悬赏达人认证 活字格认证
超级版主   /  发表于:2020-3-5 09:06:30
沙发
页面数据传递功能,可以解决一些问题
在同一个页面,我们的确实做不到
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部