一种支持推拉的页面显示方法及系统与流程

本发明属于移动终端显示，具体涉及一种支持推拉的页面显示方法及系统。

背景技术：

1、移动终端(例如手机)相较与电脑端，在相同的功能下，其展示空间有限，交互点击流程较为复杂。特别是在线上教育领域，教室端和学生端需要显示的内容非常多，移动终端在联动的体现课程活动和教学成果的关系，为教师和学生提供各环节的内容展示时，往往因为可视范围小，而使操作非常复杂。

2、如图1、2、3所示，现有移动终端显示复杂内容时有如下缺陷：

3、1、移动端展示空间有限，通常需要多次跳转才能看到更多的内容，但是无法判断哪些内容是用户想要看见的；

4、2、线上教学中显示的内容的不同活动状态，例如“未开始”、“进行中”“已结束”的活动，不应机械的展示同样的内容，因为在不同的时候用户想要看见的内容重点是不相同的；

5、3、现有的技术无法快捷的为老师提供教学成果的反馈，简单的批阅也需要跳转多次才能到达批阅页面进行批阅动作；

6、4、学生学习情况的获取不够清晰，更无法知道其他学生的学习情况，使得学习缺乏目标感。

技术实现思路

1、本发明的目的在于克服现有技术移动端展示空间有限，通常需要多次跳转才能看到更多的内容的缺陷。

2、为了实现上述目的，本发明提出了一种支持推拉的页面显示方法，所述方法包括：

3、页面分为单层结构和多层结构；

4、当页面上需显示的内容高度小于等于屏幕高度时，页面采用单层结构，内容在页面上从上到下依次显示；

5、当页面上需显示的内容高度大于屏幕高度时，页面采用多层结构，包括内容层和浮动层；支持浮动层在内容层前端进行上下滑动。

6、作为上述方法的一种改进，页面显示内容分为标题导航栏、内容层内容区域、浮动层浮动导航栏和浮动层内容区域，其中：

7、标题导航栏，在页面顶部显示，位置固定，不跟随页面滚动而变动；

8、内容层内容区域，用于显示页面详细信息；

9、浮动层浮动导航栏，用于显示若干页签，用以切换浮动层内容区域显示内容；

10、浮动层内容区域，用于根据浮动层浮动导航栏的页签显示不同的内容；

11、页面由上到下依次显示标题导航栏、内容层内容区域、浮动层浮动导航栏和浮动层内容区域。

12、3、根据权利要求2所述的支持推拉的页面显示方法，其特征在于：

13、多层结构时，内容层包括标题导航栏和内容层内容区域；浮动层包括浮动层浮动导航栏和浮动层内容区域。

14、作为上述方法的一种改进，页面的显示状态分为中间状态、跟随状态、吸底状态和吸顶状态，其中：

15、当页面为中间状态，浮动层浮动导航栏显示在屏幕中间位置；

16、当页面为跟随状态，浮动层浮动导航栏在屏幕上的位置根据内容层内容区域所占高度确定；当标题导航栏、内容层内容区域和浮动层浮动导航栏的高度之和小于屏幕高度时，页面才会显示跟随状态；

17、当页面为吸底状态，页面上最大化的展示内容层内容区域，浮动层浮动导航栏仅显示必要功能按钮；

18、当页面为吸顶状态，不显示内容层内容区域，页面上最大化的展示浮动层浮动导航栏和浮动层内容区域。

19、作为上述方法的一种改进，首次进入页面时，当页面显示内容的高度不超过屏幕高度时，当前显示状态为跟随状态；页面显示内容的高度不超过屏幕高度是指：标题导航栏高度加内容层内容区域高度加浮动层浮动导航栏高度不超过屏幕高度；

20、首次进入页面时，当页面显示内容的高度超过屏幕高度，且浮动层的内容需要优先居中显示时，当前显示状态为中间状态；

21、首次进入页面时，当页面显示内容的高度超过屏幕高度，且浮动层的内容不需要优先居中显示时，当前显示状态为吸底状态；

22、浮动层的内容是否需要优先居中显示，根据显示内容的业务含义确定。

23、作为上述方法的一种改进，当前显示状态为中间状态时，当用户在内容层内容区域内滑动则页面切换到吸底状态；若用户向上滑动浮动层浮动导航栏，则页面切换到吸顶状态；若用户向下滑动浮动层浮动导航栏，则页面切换到吸底状态；

24、当前显示状态为吸顶状态时，用户通过手势拖动浮动层浮动导航栏，在拖动手势结束时，浮动层浮动导航栏的顶部坐标的y值大于等于屏幕一半的坐标的y值，则页面切换到吸底状态，否则还原至吸顶状态；移动终端页面以页面左上角为坐标轴原点，向下为y轴正方向；

25、当前显示状态为吸底状态时，用户滚动查看内容层内容区域直到底部没有未显示内容时，即标题导航栏高度加内容层内容区域需要显示的高度加浮动层浮动导航栏高度小于等于屏幕高度时，页面切换到跟随状态；

26、当前显示状态为跟随状态时，用户通过手势拖动浮动层浮动导航栏，在拖动手势结束时，浮动层浮动导航栏的顶部坐标的y值大于等于屏幕一半的坐标的y值，页面切换到吸底状态，否则切换到吸顶状态。

27、作为上述方法的一种改进，浮动层内容区域包含搜索框时，当页面处于吸底状态、中间状态或跟随状态时，如果点击搜索框触发搜索功能，则页面切换到吸顶状态，并唤起键盘。

28、作为上述方法的一种改进，当页面处于吸底状态、中间状态或跟随状态时，如果触发了浮动层浮动导航栏上的页签切换操作，则页面切换到吸顶状态。

29、本申请还提供一种支持推拉的页面显示系统，基于上述的方法实现，所述系统包括：

30、判断模块，用于根据页面内容和用户对页面的操作判断页面的显示状态，并将页面的显示状态发送给滑动模块和显示模块；

31、滑动模块，用于动态生成页面显示的各部分内容；还用于响应内容层和浮动层的滑动交互操作；

32、显示模块，用于将滑动模块生成的各区域内容显示在页面上。

33、与现有技术相比，本发明的优势在于：和

34、在一个页面中，采用双层结构显示内容，支持通过滑动的方式查看内容层的详情内容和浮动层的数据内容。

35、1、在双层结构中，不同的层级展示不同的内容，内容层主要展示教学内容，而浮动层主要展示教学数据，从而使布局更加灵活；

36、2、支持在不同的教学活动下，教师可以选择查看内容层的教学内容或浮动层的教学数据；

37、3、支持浮动层的四种展示状态，吸底状态、吸顶状态、中间状态、跟随状态，根据不同的教学活动，不同的活动状态，灵活展示，且浮动层可以随时手势拖拽进行查看教学数据；

38、4、考虑到在教学活动其内容层的教学内容过少时，双层机构设计将自动变动为单层结构设计，已达到用户使用时的流畅性；

39、5、在多种不同的教学活动详情页面，使用同一种交互设计，从用户的角度而言，减少了用户学习的成本，而从研发角度而言，提高了代码的复用性减少了重复开发的工作量。

技术特征：

1.一种支持推拉的页面显示方法，所述方法包括：

2.根据权利要求1所述的支持推拉的页面显示方法，其特征在于：

3.根据权利要求2所述的支持推拉的页面显示方法，其特征在于：

4.根据权利要求3所述的支持推拉的页面显示方法，其特征在于：

5.根据权利要求4所述的支持推拉的页面显示方法，其特征在于：

6.根据权利要求4所述的支持推拉的页面显示方法，其特征在于：

7.根据权利要求4所述的支持推拉的页面显示方法，其特征在于：

8.根据权利要求4所述的支持推拉的页面显示方法，其特征在于：

9.一种支持推拉的页面显示系统，基于权利要求1-8任一所述的方法实现，其特征在于，所述系统包括：

技术总结
本发明提供了一种支持推拉的页面显示方法及系统，所述方法包括：页面分为单层结构和多层结构；当页面上需显示的内容高度小于等于屏幕高度时，页面采用单层结构，内容在页面上从上到下依次显示；当页面上需显示的内容高度大于屏幕高度时，页面采用多层结构，包括内容层和浮动层；支持浮动层在内容层前端进行上下滑动。本发明的优势在于：在一个页面中，采用双层结构显示内容，支持通过滑动的方式查看内容层的详情内容和浮动层的数据内容。在双层结构中，不同的层级展示不同的内容，内容层主要展示教学内容，而浮动层主要展示教学数据，从而使布局更加灵活；支持在不同的教学活动下，教师可以选择查看内容层的教学内容或浮动层的教学数据。

技术研发人员：张敬涵,唐星,赵宁,陆天宇,侯嘉晖,成平
受保护的技术使用者：北京翼鸥教育科技有限公司
技术研发日：
技术公布日：2024/9/23