页面处理方法、装置、电子设备及可读存储介质

摘要

本申请公开了一种页面处理方法、装置、电子设备及可读存储介质，可应用于互联网及电子设备智能信控相关技术领域。具体实现方案为：显示屏上显示包含可滚动区的第一页面，当第一页面和显示屏的第一边界重合时，电子设备监测用户在第一页面的可滚动区输入的指向显示屏的第二边界的滑动手势，电子设备判断滑动手势的滑动距离是否满足预设距离。当滑动距离满足预设距离时，执行返回上级iOS页面的操作。采用该种方案，在不影响第一页面可滚动区的操作的同时，实现在第一页面的主屏区右滑能够返回上级页面的目的，实现原生页面和包含可滑动区的第一页面的一致性。

权利要求

1.一种页面处理方法，包括：

在电子设备的显示屏上显示第一页面，所述第一页面包含可滚动区，所述第一页面为flutter页面；

监测用户在所述第一页面的可滚动区输入的第二手势；

当所述第二手势的按压时长超过预设时长时，控制所述第一页面跟随所述第二手势滚动，直至所述第一页面的第一边界与所述显示屏的第一边界重合；

当所述第一页面的第一边界与所述显示屏的第一边界重合时，监测用户在所述第一页面的可滚动区输入的第一手势，所述第一手势的滑动方向指向所述显示屏的第二边界，所述显示屏的第一边界和所述显示屏的第二边界平行，所述第一页面的第一边界是所述第一页面中与所述显示屏的第二边界平行、且靠近所述显示屏的第一边界的边界；

若所述第一手势的滑动距离满足预设距离，则执行返回第二页面的操作，所述第二页面是所述第一页面的上级页面且为iOS页面。

2.根据权利要求1所述的方法，其中，所述若所述第一手势的滑动距离满足预设距离，则执行返回第二页面的操作，包括：根据所述第一手势的滑动距离和所述显示屏的宽度，确定滑动百分比；

根据所述滑动百分比，从所述第一页面返回所述第二页面的过程中控制所述显示屏显示转场动画。

3.根据权利要求2所述的方法，其中，所述根据所述滑动百分比，从所述第一页面返回所述第二页面的过程中在所述显示屏上显示转场动画之后，还包括：监测到所述用户抬起所述第一手势；

当所述百分比大于或等于预设百分比时，全屏显示所述第二页面；

当所述百分比小于所述预设百分比时，全屏显示所述第一页面。

4.根据权利要求1所述的方法，其中，还包括：

所述第一页面跟随所述第二手势滚动过程中，当所述第一页面的第一边界与所述显示屏的第一边界不重合时，则在所述显示屏上显示滚动后的第一页面。

5.根据权利要求4所述的方法，其中，所述第一页面跟随所述第二手势滚动过程中，当所述第一页面的第一边界与所述显示屏的第一边界不重合时，则在所述显示屏上显示滚动后的第二页面，包括：所述第一页面跟随所述第二手势滚动过程中，当所述第一页面的第一边界与所述显示屏的第一边界不重合时，则将所述第二手势对应的事件传递给目标引擎，以使得所述目标引擎根据所述第二手势对所述第一页面进行滚动，并在所述显示屏上显示滚动后的第一页面。

6.根据权利要求1‑3任一项所述的方法，其中，所述若所述第一手势的滑动距离满足预设距离，则执行返回第二页面的操作，包括：若所述第一手势的滑动距离满足预设距离，则将所述第一手势对应的事件传递给手势控制器，以使得所述手势控制器根据所述第一手势执行滑动返回上级页面的操作，所述手势控制器是电子设备的操作系统的手势控制器。

7.根据权利要求1‑3任一项所述的方法，其中，所述当所述第一页面的第一边界与所述显示屏的第一边界重合时，监测用户在所述第一页面的可滚动区输入的第一手势，包括：当所述第一页面的第一边界与所述显示屏的第一边界重合时，利用页面控制器在所述第一页面的可滚动区监测到用户输入的第一手势，所述页面控制器用于监测用户在所述第一页面内输入的手势。

8.一种页面处理装置，包括：

显示模块，用于在电子设备的显示屏上显示第一页面，所述第一页面包含可滚动区，所述第一页面为flutter页面；

处理模块，当所述第一页面的第一边界与所述显示屏的第一边界重合时，监测用户在所述第一页面的可滚动区输入的第一手势，所述第一手势的滑动方向指向所述显示屏的第二边界，所述显示屏的第一边界和所述显示屏的第二边界平行，所述第一页面的第一边界是所述第一页面中与所述显示屏的第二边界平行、且靠近所述显示屏的第一边界的边界；

返回模块，用于若所述第一手势的滑动距离满足预设距离，则执行返回第二页面的操作，所述第二页面是所述第一页面的上级页面且为iOS页面；

所述处理模块，当所述第一页面的第一边界与所述显示屏的第一边界重合时，监测用户在所述第一页面的可滚动区输入的第一手势之前，还用于监测所述用户在所述第一页面的可滚动区输入的第二手势，当所述第二手势的按压时长超过预设时长时，控制所述第一页面跟随所述第二手势滚动，直至所述第一页面的第一边界与所述显示屏的第一边界重合。

9.根据权利要求8所述的装置，其中，

所述返回模块包括确定单元和控制单元；

所述确定单元，用于根据所述第一手势的滑动距离和所述显示屏的宽度，确定滑动百分比；

所述控制单元，用于根据所述确定单元确定的所述滑动百分比，从所述第一页面返回所述第二页面的过程中控制所述显示屏显示转场动画。

10.根据权利要求9所述的装置，其中，

所述处理模块，在所述控制单元根据所述确定单元确定的所述滑动百分比，从所述第一页面返回所述第二页面的过程中控制所述显示屏显示转场动画之后，还用于监测到所述用户抬起所述第一手势，当所述百分比大于或等于预设百分比时，控制所述显示屏全屏显示所述第二页面；当所述百分比小于所述预设百分比时，控制所述显示屏全屏显示所述第一页面。

11.根据权利要求8所述的装置，其中，

所述处理模块，还用于第一页面跟随所述第二手势滚动过程中，当所述第一页面的第一边界与所述显示屏的第一边界不重合时，控制所述显示屏上显示滚动后的第二页面。

12.根据权利要求11所述的装置，其中，

所述处理模块，用于所述第一页面跟随所述第二手势滚动过程中，当所述第一页面的第一边界与所述显示屏的第一边界不重合时，则将所述第二手势对应的事件传递给目标引擎，以使得所述目标引擎根据所述第二手势对所述第一页面进行滚动，并在所述显示屏上显示滚动后的第一页面。

13.根据权利要求8‑10任一项所述的装置，其中，

所述返回模块，用于若所述第一手势的滑动距离满足预设距离，则将所述第一手势对应的事件传递给手势控制器，以使得所述手势控制器根据所述第一手势执行滑动返回上级页面的操作，所述手势控制器是电子设备的操作系统的手势控制器。

14.根据权利要求8‑10任一项所述的装置，其中，

所述处理模块，用于当所述第一页面的第一边界与所述显示屏的第一边界重合时，利用页面控制器在所述第一页面的可滚动区监测到用户输入的第一手势，所述页面控制器用于监测用户在所述第一页面内输入的手势。

15.一种电子设备，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1‑7中任一项所述的方法。

16.一种存储有计算机指令的非瞬时计算机可读存储介质，所述计算机指令用于使电子设备执行权利要求1‑7中任一项所述的方法。

说明书

页面处理方法、装置、电子设备及可读存储介质

技术领域

[0001] 本申请涉及互联网及电子设备技术领域，尤其涉及一种页面处理方法、装置、电子设备及可读存储介质。

背景技术

[0002] Flutter框架是谷歌的移动显示屏(user interface，UI)框架，可以快速在 iOS系统或安卓(Android)系统上构建高质量的原生显示屏。具有跨平台、高保真和高性能的特点。

[0003] 对于iOS系统而言，当APP是基于iOS开发的APP时，该APP包含iOS 页面，iOS页面通常支持返回操作，如点击返回按钮、屏幕边缘右滑、主屏区右滑等方式。当采用iOS技术和flutter技术混合开发APP时，此时，APP 页面包括iOS页面和flutter页面。若当前页面为flutter页面，上级页面为iOS 页面，则可通过点击flutter页面上的返回按钮或通过屏幕边缘右滑操作返回上级页面。

[0004] 现考虑在基于混合技术开发的APP中引入主屏区右滑操作返回上级页面。但是，flutter页面中存在可滚动区，用于实现flutter页面的左移、右移、翻页等。显然，可滚动区的操作和主屏区右滑操作的功能冲突。

发明内容

[0005] 本申请提供了一种页面处理方法、装置、电子设备及可读存储介质，通过对滑动事件的偏移进行判断，确定出用户意图是返回上级页面还是对可滚动区进行的操作，从而实现flutter页面支持主屏区右滑返回上级页面的目的。

[0006] 第一方面，本申请实施例提供一种页面处理方法，包括：

[0007] 在电子设备的显示屏上显示第一页面，所述第一页面包含可滚动区；

[0008] 当所述第一页面的第一边界与所述显示屏的第一边界重合时，监测用户在所述第一页面的可滚动区输入的第一手势，所述第一手势的滑动方向指向所述显示屏的第二边界，所述显示屏的第一边界和所述显示屏的第二边界平行，所述第一页面的第一边界是所述第一页面中与所述显示屏的第二边界平行、且靠近所述显示屏的第一边界的边界；

[0009] 若所述第一手势的滑动距离满足预设距离，则执行返回第二页面的操作，所述第二页面是所述第一页面的上级页面。

[0010] 第二方面，本申请实施例提供一种页面处理装置，包括：

[0011] 显示模块，用于在电子设备的显示屏上显示第一页面，所述第一页面包含可滚动区；

[0012] 处理模块，当所述第一页面的第一边界与所述显示屏的第一边界重合时，监测用户在所述第一页面的可滚动区输入的第一手势，所述第一手势的滑动方向指向所述显示屏的第二边界，所述显示屏的第一边界和所述显示屏的第二边界平行，所述第一页面的第一边界是所述第一页面中与所述显示屏的第二边界平行、且靠近所述显示屏的第一边界的边界；

[0013] 返回模块，用于若所述第一手势的滑动距离满足预设距离，则执行返回第二页面的操作，所述第二页面是所述第一页面的上级页面。

[0014] 第三方面、本申请实施例提供一种电子设备，包括：

[0015] 至少一个处理器；以及

[0016] 与所述至少一个处理器通信连接的存储器；其中，

[0017] 所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行第一方面或第一方面任意可能实现的方法。

[0018] 第四方面，本申请实施例提供一种包含指令的计算机程序产品，所述程序产品包括：计算机程序，所述计算机程序存储在可读存储介质中，电子设备的至少一个处理器可以从所述可读存储介质读取所述计算机程序，所述至少一个处理器执行所述计算机程序使得电子设备执行第一方面所述的方法。

[0019] 第五方面，本申请实施例提供一种存储有计算机指令的非瞬时计算机可读存储介质，所述计算机指令用于使所述电子设备执行上述第一方面或第一方面的各种可能的实现方式中的方法。

[0020] 根据本申请的技术，在不影响第一页面可滚动区的操作的同时，实现在第一页面的主屏区右滑能够返回上级页面的目的，实现原生页面和包含可滑动区的第一页面的一致性。

[0021] 应当理解，本部分所描述的内容并非旨在标识本申请的实施例的关键或重要特征，也不用于限制本申请的范围。本申请的其它特征将通过以下的说明书而变得容易理解。

附图说明

[0022] 附图用于更好地理解本方案，不构成对本申请的限定。其中：

[0023] 图1为主屏区右滑返回上级页面和对可滚动区进行操作发生冲突的示意图；

[0024] 图2是用于执行本申请实施例所述的页面处理方法的电子设备的组成示意图；

[0025] 图3是本申请实施例提供的页面处理方法的流程图；

[0026] 图4是本申请实施例提供页面处理方法中电子设备显示flutter页面的示意图；

[0027] 图5是本申请实施例提供的页面处理方法中转场动画的示意图；

[0028] 图6是本申请实施例提供的页面管理方法的过程示意图；

[0029] 图7为本申请实施例提供的一种页面处理装置的结构示意图

[0030] 图8是用来实现本申请实施例页面处理方法的电子设备的框图。

具体实施方式

[0031] 以下结合附图对本申请的示范性实施例做出说明，其中包括本申请实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本申请的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

[0032] iOS7之前，基于iOS技术开发的APP主要包含iOS页面，iOS页面也称为原生页面，iOS页面上设置返回按钮，通过用户点击返回按钮返回上级页面。随着智能化，多点触摸、手势识别等逐渐成为用户欢迎的交互方式，能极大程度上提高用户体验。iOS演进到iOS7之后，对这种页面栈导航的方式进行了改进，增加了屏幕边缘右滑返回的交互方式。从此很少有用户使用点击左上角导航栏的返回按钮返回上级页面。因为这种返回方式对反手操作不友好。

[0033] 上述通过屏幕边缘右滑返回上级页面的方式，由于只能通过屏幕边缘触发，因此仍然有很大的缺陷，用户期望能够通过触摸并右滑主屏区返回上级页面。经过多年的研究，目前业界已经有比较成熟的解决方案。该方案的思路如下：屏幕边缘右滑的操作是通过一个特殊的手势识别器去监听这种滑动事件，事件发生后由系统预置的处理函数负责页面的转场，从而实现滑动返回。为了达到主屏区右滑返回上级页面的功能，在整个页面上添加一个新的手势识别器，并将这个手势识别器的处理函数设置为系统的处理函数。之后， iOS系统监测到全屏的滑动事件后，将该事件交给处理函数进行页面转场。

[0034] 上述的APP通常为基于iOS技术开发的APP。然而，为了节约人力成本、提高开发效率等，现阶段很多时候采用iOS技术和flutter技术混合开发应用程序(application，APP)。该种采用混合技术开发的APP的页面包括flutter 页面和原生的iOS页面。flutter页面包含可滚动区时，若该flutter页面的上级页面也为flutter页面，则对可滚动区进行操作就能够返回上级页面，属于 flutter页面内部的跳转行为。但是，当flutter页面的上级页面为iOS页面时，若主屏区右滑返回上级页面，则和对flutter页面上的可滚动区进行操作发生冲突。

[0035] 图1为主屏区右滑返回上级页面和对可滚动区进行操作发生冲突的示意图。请参照图1，flutter页面上具有一个可滚动区，在可滚动区进行右滑能够实现对flutter页面的滚动操作，如右移、翻页等。倘若在主屏区，即显示屏的任意位置右滑实现返回上级页面，则发生冲突。

[0036] 为了避免该冲突，目前的解决方案是打开flutter页面后禁止主屏区右滑返回上级页面的功能。但是，使用混合技术开发APP的目的是为了节约成本，降低人力和时间的投入，提高开发效率和版本迭代速度，但是不能损伤APP 的用户体验。除此之外，不能让用户明显感知同一个APP中那部分是iOS原生实现，哪部分是flutter技术实现。在用户体验和性能上iOS页面和flutter 页面需要保持一致。上述的解决方案为了保证flutter页面中可滚动区能够正常操作的情况下，牺牲了flutter页面的主屏区右滑返回的功能，这造成iOS 页面和flutter页面的交互不一致性，是对APP用户体验的严重损伤，

[0037] 本申请旨在实现：在不影响flutter页面可滚动区的操作的同时，实现在 flutter页面的主屏区右滑能够返回上级页面的目的，实现原生页面和flutter 页面的一致性。

[0038] 图2是用于执行本申请实施例所述的页面处理方法的电子设备的组成示意图。请参照图2，电子设备200包括处理器201和存储器202。其中，处理器201可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器201可以包括应用处理器(application processor，AP)、调制解调处理器、图形处理器(graphics processing unit，GPU)、图像信号处理器(image signal processor，ISP)、控制器、存储器、视频编解码器、数字信号处理器(digital signal processor，DSP)、基带处理器、神经网络处理器(neural‑network processing unit， NPU)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。

[0039] 存储器202可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器202还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器202中的非暂态的计算机可读存储介质用于存储至少一个指令，该至少一个指令用于被处理器201所执行以实现本申请方法实施例提供的音频文件的处理方法。

[0040] 在一些实施例中，电子设备200还可选包括有：外围设备接口203和至少一个外围设备。处理器201、存储器202和外围设备接口203之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口203相连。具体地，外围设备包括：射频电路204、显示屏205、摄像头组件206、音频电路207、定位组件208和电源209中的至少一种。

[0041] 外围设备接口203可被用于将输入/输出(Input/Output，I/O)相关的至少一个外围设备连接到处理器201和存储器202。在一些实施例中，处理器201、存储器202和外围设备接口203被集成在同一芯片或电路板上；在一些其他实施例中，处理器201、存储器202和外围设备接口203中的任意一个或两个可以在单独的芯片或电路板上实现，本实施例对此不予限定。

[0042] 射频电路204用于接收和发射射频(Radio Frequency，RF)信号，也称电磁信号。射频电路204通过电磁信号与通信网络以及其他通信设备进行通信。射频电路204将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。可选地，射频电路204包括：天线系统、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路204可以通过至少一种无线通信协议来与其它电子设备进行通信。该无线通信协议包括但不限于：城域网、各代移动通信网络 (2G、3G、4G及5G)、无线局域网和/或无线保真(Wireless Fidelity，Wi‑Fi)网络。在一些实施例中，射频电路204还可以包括近距离无线通信(Near Field Communication，NFC)有关的电路，本公开对此不加以限定。

[0043] 显示屏205用于显示显示屏(User Interface，UI)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏205是触摸显示屏时，显示屏205还具有采集在显示屏205的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器201进行处理。此时，显示屏205 还可以用于提供虚拟按钮和/或虚拟键盘，也称软按钮和/或软键盘。在一些实施例中，显示屏205可以为一个，设置电子设备200的前面板；显示屏205 可以采用液晶显示屏(Liquid Crystal Display，LCD)、有机发光二极管(Organic Light‑Emitting Diode，OLED)等材质制备。

[0044] 摄像头组件206用于采集图像或视频。可选地，摄像头组件206包括前置摄像头和后置摄像头。通常，前置摄像头设置在电子设备的前面板，后置摄像头设置在电子设备的背面。音频电路207可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波，并将声波转换为电信号输入至处理器201 进行处理，或者输入至射频电路204以实现语音通信。出于立体声采集或降噪的目的，麦克风可以为多个，分别设置在电子设备200的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器201 或射频电路204的电信号转换为声波。扬声器可以是传统的薄膜扬声器，也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时，不仅可以将电信号转换为人类可听见的声波，也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中，音频电路207还可以包括耳机插孔。

[0045] 定位组件208用于定位电子设备200的当前地理位置，以实现导航或基于位置的服务(Location Based Service，LBS)。定位组件208可以是基于美国的全球定位系统(Global Positioning System，GPS)、中国的北斗系统、俄罗斯的格雷纳斯系统或欧盟的伽利略系统的定位组件。

[0046] 电源209用于为电子设备200中的各个组件进行供电。电源209可以是交流电、直流电、一次性电池或可充电电池。当电源209包括可充电电池时，该可充电电池可以支持有线充电或无线充电。该可充电电池还可以用于支持快充技术。

[0047] 在一些实施例中，电子设备200还包括有一个或多个传感器210。该一个或多个传感器210包括但不限于：加速度传感器、陀螺仪传感器、压力传感器、指纹传感器、光学传感器以及接近传感器。

[0048] 加速度传感器可以检测以电子设备200建立的坐标系的三个坐标轴上的加速度大小。陀螺仪传感器可以检测电子设备200的机体方向及转动角度，陀螺仪传感器可以与加速度传感器协同采集用户对电子设备200的3D动作。压力传感器可以设置在电子设备200的侧边框和/或触摸显示屏205的下层。当压力传感器设置在电子设备200的侧边框时，可以检测用户对电子设备200 的握持信号。指纹传感器用于采集用户的指纹。光学传感器用于采集环境光强度。接近传感器，也称距离传感器，通常设置在电子设备200的前面板。接近传感器用于采集用户与电子设备200的正面之间的距离。

[0049] 电子设备200可以为手机、平板电脑、笔记本电脑、台式计算机、便携式计算机、智能手表、智能电视、掌上电脑、游戏机、车载电子设备、商业电子设备等。

[0050] 本领域技术人员可以理解，图2中示出的结构并不构成对电子设备200 的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。

[0051] 电子设备200上安装采用iOS技术和flutter技术混合开发的APP，用户通过电子设备200的显示屏205对APP进行操作时，电子设备200中的处理器201调用存储器202中的程序，以实现本申请实施例提供的页面处理方法。

[0052] 图3是本申请实施例提供的页面处理方法的流程图。本实施例的执行主体是上述的电子设备，本实施例包括：

[0053] 301、在电子设备的显示屏上显示第一页面，所述第一页面包含可滚动区。

[0054] 本申请实施例中，将包含可滚动区的页面统称为第一页面，将不包含可滚动区且为第一页面的上级页面的页面称为第二页面。

[0055] 例如，当一款APP是采用flutter技术和iOS技术混合开发时，该APP 的页面包括flutter页面和iOS页面。Flutter页面为使用flutter技术实现的页面，iOS页面也称为原生页面，是能够直接运行于iOS操作系统上的页面。

[0056] 用户点击电子设备的显示屏上的APP图标打开该APP后，显示屏上显示APP的界面。由于APP的界面包括原生的iOS页面和flutter页面。因此，用户操作APP的时候，可能会先进入一个iOS页面，再进入一个flutter页面。此时，显示屏显示flutter页面。Flutter页面上有可滚动区，可滚动区内包含一些可滚动的界面元素，如列表、能左右滑动带table的页面等，通过点击table 就能够实现翻页。

[0057] 本申请实施例中，显示屏即为电子设备的显示屏。当显示屏显示第一页面时，初始时，若第一页面的左侧边界和显示屏的左侧边界不重合，则用户在可滚动区内通过第二手势等能够使得第一页面的第一边界与显示屏的第一边界重合。若第一页面的第一边界与显示屏的第一边界重合，则用户在可滚动区内的第一手势可能会触发主屏区滑动返回上级页面(即第二页面)的操作。

[0058] 图4是本申请实施例提供页面处理方法中电子设备显示flutter页面的示意图。请参照图4，假设电子设备的显示屏的大小为6寸，即显示屏的大小大约为23厘米×7厘米，而flutter页面的大小为25厘米×9厘米，则flutter 页面的左侧边界和显示屏的左侧边界如图中粗黑虚线所示。

[0059] 需要说明的是，图4中flutter页面的尺寸大于显示屏，虽然图4中示意出整个flutter页面，但是实际中，电子设备仅显示flutter页面的部分区域，该部分区域的大小即为电子设备显示屏的大小。

[0060] 用户在可滚动区内右滑，如图中黑色箭头所示，则可对flutter页面进行右移，使得flutter页面的左侧边界与显示屏的左侧边界重合。

[0061] 需要说明的是，上图4中是以左侧边界为第一边界、第二手势为右滑手势为例进行说明，然而，本申请实施例并不限制，其他可行的实现方式中，第一边界也可以为右侧边界，第二手势为左滑手势等。

[0062] 302、当所述第一页面的第一边界与所述显示屏的第一边界重合时，监测用户在所述第一页面的可滚动区输入的第一手势。

[0063] 其中，所述第一手势的滑动方向指向所述显示屏的第二边界，所述显示屏的第一边界和所述显示屏的第二边界平行，所述第一页面的第一边界是所述第一页面中与所述显示屏的第二边界平行、且靠近所述显示屏的第一边界的边界。

[0064] 再请参照图4，当显示屏的左侧边界和flutter页面的左侧边界重合后，在该时间点监测第一手势，该第一手势可以是显示屏的左侧边界和flutter页面的左侧边界重合之前，用户在显示屏输入的第二手势，但该第二手势一直未抬起且持续右滑。电子设备自重合时间点重新监测该第二手势。也就是说，假设为了使得显示屏的左侧边界和flutter页面的左侧边界重合，用户的第二手势移动了2厘米。重合之后，电子设备认为重合时间点的滑动距离为0。

[0065] 另外，用户在显示屏上输入第二手势之后，当显示屏的左侧边界和flutter 页面的左侧边界重合时，用户可能抬起了第二手势。之后，用户输入第一手势。电子设备在用户输入第一手势的时间点监测第一手势。

[0066] 303、若所述第一手势的滑动距离满足预设距离，则执行返回第二页面的操作，所述第二页面是所述第一页面的上级页面且为iOS页面。

[0067] 示例性的，电子设备在第一页面的第一边界与所述显示屏的第一边界重合后，监测第一手势。自监测到第一手势起，判断该第一手势的滑动距离。若满足预设距离，比如，第一手势移动了2厘米，则执行返回上级页面。当上级页面为iOS页面时，则返回iOS页面。若滑动距离太短，不满足预设距离，则继续显示flutter页面。

[0068] 本申请实施例提供的页面处理方法，显示屏上显示包含可滚动区的第一页面，当第一页面和显示屏的第一边界重合时，电子设备监测用户在第一页面的可滚动区输入的指向显示屏的第二边界的滑动手势，显示屏的该第一边界和显示屏的第二边界平行，电子设备判断滑动手势的滑动距离是否满足预设距离。当滑动距离满足预设距离时，执行返回上级页面的操作。采用该种方案，在不影响第一页面可滚动区的操作的同时，实现在第一页面的主屏区右滑能够返回上级页面的目的，实现原生页面和包含可滑动区的第一页面的一致性。

[0069] 上述实施例中，所述滑动手势的滑动距离满足预设距离，则执行返回第二页面的操作时，电子设备根据所述第一手势的滑动距离和所述显示屏的宽度，确定滑动百分比。然后，电子设备根据所述滑动百分比，从所述第一页面返回所述第二页面的过程中在所述显示屏上显示转场动画。

[0070] 示例性的，多个页面之间的切换称为页面转场。页面转场也称为转场动画，通过转场动画，能够清楚的显示手势滑动过程中页面跟随，iOS系统自带的页面栈导航的方式无法做到手势滑动过程中的页面跟随。转场动画中，电子设备根据右滑手势滑动过程中滑动距离和显示屏的宽度，确定滑动百分比，根据百分比来控制从第一页面到第二页面的过度效果。下面，以第一页面为flutter页面、第二页面为iOS页面、第一边界为左侧边界、第一手势为右滑手势为例进行说明。

[0071] 图5是本申请实施例提供的页面处理方法中转场动画的示意图。请参照图5，初始时，第一页面，即flutter页面和显示屏的左侧边界重合。之后，随着右滑手势的持续滑动，显示屏上出现部分上级页面，同时flutter页面占的面积逐渐变小。图中黑色双向箭头所示为右滑手势的滑动距离。当滑动距离占显示屏宽度的50％后，若用户抬起右滑手势，则电子设备显示上级页面，从而从fultter页面返回上级原生页面。

[0072] 采用该种方案，电子设备根据右滑手势占显示屏的宽度的百分比，设置转场动画，实现手势滑动过程中页面跟随的效果。

[0073] 上述实施例中，电子设备根据所述滑动百分比，设置转场动画之后，还监测用户是否抬起第一手势。若用户未抬起右滑手势，则继续显示转场动画。当用户抬起第一手势时，若滑动距离占显示屏宽度的百分比所述百分比大于或等于预设百分比时，全屏显示所述第二页面；当用户抬起第一手势时，若滑动距离占显示屏宽度的百分比所述百分比小于预设百分比时，全屏显示所述第一页面。

[0074] 以第一页面为flutter页面、第二页面为iOS页面、第一边界为左侧边界、第一手势为右滑手势为例，若用户抬起右滑手势，电子设备确定自flutter页面的左侧边界与所述显示屏的左侧边界重合后，监测到所述右滑手势起至所述用户抬起所述右滑手势，所述右滑手势的滑动距离，如图5中黑色双向箭头所示。之后，电子设备确定该滑动距离占显示屏宽度的百分比。若该百分比大于或等于预设百分比，则在手势抬起之后全屏显示上级页面；若百分比小于预设百分比，则在手势抬起之后全屏显示flutter。

[0075] 采用该种方案，只有滑动距离满足一定条件后，才触发进入上级页面，避免用户误操作。

[0076] 上述实施例中，当所述第一页面的第一边界与所述显示屏的第一边界重合之前，为了使得第一页面的第一边界与所述显示屏的第一边界重合，用户在第一页面的可滚动区输入第二手势，当所述第二手势的按压时长超过预设时长时，控制所述第一页面跟随所述第二手势滚动，直至所述第一页面的第一边界与所述显示屏的第一边界重合。

[0077] 示例性的，电子设备根据该第二手势对第一页面进行右移、翻页等。同时，电子设备判断第二页面的第一边界与所述显示屏的第一边界是否重合。判断过程中，电子设备确定第一页面的偏移量是否为0，若第一页面的偏移量大于0，说明第一页面的第一边界还未与显示屏的第一边界重合。若第一页面的偏移量等于0，则说明第一页面的第一边界与显示屏的第一边界重合。

[0078] 采用该种方案，电子设备通过在可滚动区内进行按压滑动等，实现第一页面的第一边界与显示屏的第一边界重合的目的。

[0079] 上述实施例中，所述第一页面跟随所述第二手势滚动过程中，当所述第一页面的第一边界与所述显示屏的第一边界不重合时，则在所述显示屏上显示滚动后的第二页面。

[0080] 以第一页面为flutter页面、第二页面为iOS页面、第一边界为左侧边界、第二手势为右滑手势为例，可滚动区包含一些可滚动的界面元素，若flutter 页面还未到达最左侧边界，则通过右滑能够对flutter页面进行滚动操作，显示屏上显示滚动后的flutter页面。采用该种方案，实现主屏区右滑返回上级页面的同时不影响用户对flutter页面的可滚动区的操作。

[0081] 上述实施例中，电子设备执行页面处理方法的过程中，用到了自定义转场动画和全屏手势识别。多个页面之间的切换称之为页面转场或转场动画，能够实现手势右滑过程中页面跟随到效果，即根据滑动距离占显示屏宽度的百分比确定flutter页面和上级页面分别占据显示屏的篇幅。全屏手势识别是指：在全屏页面上创建手势识别器，并将该手势识别器的处理函数设置为电子设备的操作系统自带的处理函数，以使得所有的全屏滑动事件被模拟为屏幕边缘滑动事件。

[0082] 上述实施例中，第一页面的所有手势，如第一手势、第二手势等都被页面控制器截获，由页面控制器确定将手势对应的事件传递给手势控制器或者目标引擎，其中，手势控制器用于根据第一手势进行返回上级页面操作，目标引擎用于根据第二手势对第一页面进行滚动操作等。当本申请实施例所述的页面管理方法应用于flutter技术和iOS技术混合开发的APP时，上述的页面控制器为flutter视图控制器(flutter view Controller)。上述的手势控制器为iOS系统的手势控制器，上述的目标引擎为flutter引擎。示例性的，请参照图6。

[0083] 图6是本申请实施例提供的页面管理方法的过程示意图。请参照图6， flutter页面在iOS系统上是一个flutter视图控制器(flutter view Controller)， flutter view Controller继承于显示屏视图控制器(UI view Controller)。因此，所有的flutter页面的事件处理都是通过iOS操作系统上的事件响应链，传递给flutter view Controller。之后，再分发给flutter引擎，由flutter引擎根据手势发生的位置和类型做出响应并重绘界面。图6包括如下步骤：

[0084] 601、flutter视图控制器截获所有的滑动事件。

[0085] 示例性的，用户在flutter页面上所有的触摸事件的交互处理，都被flutter view Controller监测到。

[0086] 采用该种方案，由flutter视图控制器截获用户在显示屏输入的全部滑动手势，对滑动事件进行统一管理，实现享有flutter开发的高收益的同时，不损害用户的APP体验的目的。

[0087] 602、flutter视图控制器判断flutter页面的左侧边界与所述显示屏的左侧边界是否重合。若flutter页面的左侧边界与所述显示屏的左侧边界重合，执行步骤603；若flutter页面的左侧边界与所述显示屏的左侧边界不重合，执行步骤606。

[0088] 603、flutter视图控制器判断滑动距离是否满足预设距离，若滑动距离满足预设距离，则执行步骤604；若滑动距离不满足预设距离，则执行步骤605。

[0089] 604、flutter视图控制器将右滑手势对应的事件传递给手势控制器，以使得手势控制器根据滑动手势执行右滑返回上级页面的操作。

[0090] 示例性的，flutter view Controller监测到手势右滑后，判断flutter页面的左侧边界与所述显示屏的左侧边界是否重合。当所述flutter页面的左侧边界与所述显示屏的左侧边界重合时，且右滑手势的滑动距离满足预设距离，则 flutter view Controller将右滑手势对应的事件传递给手势控制器。以使得所述手势控制器根据滑动手势执行右滑返回上级页面的操作，手势控制器是电子设备的操作系统的手势控制器，该手势控制器和屏幕边缘右滑对应的手势控制器的处理函数相同。也就是说，将全屏手势的手势识别器的处理函数设置为屏幕边缘右滑的手势识别器的处理函数，即电子设备的操作系统自带的处理函数，以使得全屏滑动事件被模拟为屏幕边缘滑动事件。

[0091] 采用该种方案，由flutter视图控制器截获用户在显示屏输入的全部滑动手势，由flutter视图控制器决定哪些情况下将右滑手势对应的事件传递手势控制器，实现全屏右滑返回上级页面的目的。

[0092] 605、显示屏显示flutter页面。

[0093] 当所述flutter页面的左侧边界与所述显示屏的左侧边界重合后，若用户的右滑手势的滑动距离不满足预设距离，该预设距离例如是显示屏宽度的 50％，则显示屏弹回flutter页面。即手势未抬起的过程中，显示屏显示转场动画。右滑手势抬起后，由于滑动距离小于预设距离，则为了避免用户误操作，显示屏显示flutter页面。

[0094] 606、flutter视图控制器将右滑手势对应的事件递给flutter引擎，以使得 flutter引擎根据右滑手势对flutter页面进行滚动，并在显示屏上显示滚动后的 flutter页面。

[0095] 用户打开flutter页面后，flutter view Controller截获所有的滑动事件。当滑动事件为右滑手势对应的事件时，若手势右滑能够使得flutter页面右移、翻页等，即flutter页面的左侧边界和显示屏的左侧边界不重合，则将手势右滑对应的事件传递给flutter引擎，从而使得用户能够和flutter页面进行交互响应。

[0096] 采用该种方案，由flutter视图控制器截获用户在显示屏输入的全部滑动手势，由flutter控制器决定哪些情况下将右滑手势对应的事件传递flutter引擎，实现不损害用户和flutter的可滚动区交互的目的。

[0097] 上述介绍了本申请实施例提到的页面处理方法的具体实现，下述为本申请装置实施例，可以用于执行本申请方法实施例。对于本申请装置实施例中未披露的细节，请参照本申请方法实施例。

[0098] 图7为本申请实施例提供的一种页面处理装置的结构示意图。该装置可以集成在电子设备中或通过电子设备实现。如图7所示，在本实施例中，该页面处理装置700可以包括：显示模块71、处理模块72和返回模块73。

[0099] 显示模块71，用于在电子设备的显示屏上显示第一页面，所述第一页面包含可滚动区；

[0100] 处理模块72，当所述第一页面的第一边界与所述显示屏的第一边界重合时，监测用户在所述第一页面的可滚动区输入的第一手势，所述第一手势的滑动方向指向所述显示屏的第二边界，所述显示屏的第一边界和所述显示屏的第二边界平行，所述第一页面的第一边界是所述第一页面中与所述显示屏的第二边界平行、且靠近所述显示屏的第一边界的边界；

[0101] 返回模块73，用于若所述第一手势的滑动距离满足预设距离，则执行返回第二页面的操作，所述第二页面是所述第一页面的上级页面且为iOS页面。

[0102] 一种可行的设计中，所述返回模块73，用于根据所述第一手势的滑动距离和所述显示屏的宽度，确定滑动百分比，根据所述确定单元确定的所述滑动百分比，从所述第一页面返回所述第二页面的过程中控制所述显示屏显示转场动画。

[0103] 一种可行的设计中，所述处理模块72，在所述控制单元根据所述确定单元确定的所述滑动百分比，从所述第一页面返回所述第二页面的过程中控制所述显示屏显示转场动画之后，还用于监测到所述用户抬起所述第一手势，当所述百分比大于或等于预设百分百时，控制所述显示屏全屏显示所述第二页面；当所述百分比小于所述预设百分比时，控制所述显示屏全屏显示所述第一页面。

[0104] 一种可行的设计中，所述处理模块72，当所述第一页面的第一边界与所述显示屏的第一边界重合时，监测用户在所述第一页面的可滚动区输入的第一手势之前，还用于监测所述用户在所述第一页面的可滚动区输入的第二手势，当所述第二手势的按压时长超过预设时长时，控制所述第一页面跟随所述第二手势滚动，直至所述第一页面的第一边界与所述显示屏的第一边界重合。

[0105] 一种可行的设计中，所述处理模块72，还用于第一页面跟随所述第二手势滚动过程中，当所述第一页面的第一边界与所述显示屏的第一边界不重合时，控制所述显示屏上显示滚动后的第二页面。

[0106] 一种可行的设计中，所述处理模块72，用于所述第一页面跟随所述第二手势滚动过程中，当所述第一页面的第一边界与所述显示屏的第一边界不重合时，则将所述第二手势对应的事件传递给目标引擎，以使得所述目标引擎根据所述第二手势对所述第一页面进行滚动，并在所述显示屏上显示滚动后的第一页面。

[0107] 一种可行的设计中，所述返回模块73，用于若所述第一手势的滑动距离满足预设距离，则将所述第一手势对应的事件传递给手势控制器，以使得所述手势控制器根据所述第一手势执行滑动返回上级页面的操作，所述手势控制器是电子设备的操作系统的手势控制器。

[0108] 一种可行的设计中，所述处理模块72，用于当所述第一页面的第一边界与所述显示屏的第一边界重合时，利用页面控制器在所述第一页面的可滚动区监测到用户输入的第一手势，所述页面控制器用于监测用户在所述第一页面内输入的手势。

[0109] 根据本申请的实施例，本申请还提供了一种电子设备和一种可读存储介质。

[0110] 根据本申请的实施例，本申请还提供了一种计算机程序产品，程序产品包括：计算机程序，计算机程序存储在可读存储介质中，电子设备的至少一个处理器可以从可读存储介质读取计算机程序，至少一个处理器执行计算机程序使得电子设备执行上述任一实施例提供的方案。

[0111] 图8是用来实现本申请实施例页面处理方法的电子设备的框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。

[0112] 如图8所示，电子设备800包括计算单元801，其可以根据存储在只读存储器(ROM)802中的计算机程序或者从存储单元808加载到随机访问存储器(RAM)803中的计算机程序，来执行各种适当的动作和处理。在RAM 803中，还可存储设备800操作所需的各种程序和数据。计算单元801、ROM 802以及RAM 803通过总线804彼此相连。输入/输出(I/O)接口805也连接至总线804。

[0113] 设备800中的多个部件连接至I/O接口805，包括：输入单元806，例如键盘、鼠标等；输出单元807，例如各种类型的显示器、扬声器等；存储单元808，例如磁盘、光盘等；以及通信单元809，例如网卡、调制解调器、无线通信收发机等。通信单元809允许设备800通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

[0114] 计算单元801可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元801的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元801执行上文所描述的各个方法和处理，例如页面处理方法。例如，在一些实施例中，页面处理方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元808。在一些实施例中，计算机程序的部分或者全部可以经由ROM 802和/或通信单元809而被载入和/或安装到设备800上。当计算机程序加载到RAM 803并由计算单元 801执行时，可以执行上文描述的页面处理方法的一个或多个步骤。备选地，在其他实施例中，计算单元801可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行页面处理方法。

[0115] 本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

[0116] 用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

[0117] 在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器 (CD‑ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

[0118] 为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管) 或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

[0119] 可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

[0120] 计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端‑服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，又称为云计算服务器或云主机，是云计算服务体系中的一项主机产品，以解决了传统物理主机与虚拟专用服务器(Virtual Private Server，VPS) 中存在的管理难度大、业务扩展性弱等缺陷。服务器也可以为分布式系统的服务器，或者是结合了区块链的服务器。

[0121] 根据本申请实施例的技术方案，在不影响第一页面可滚动区的操作的同时，实现在第一页面的主屏区右滑能够返回上级页面的目的，实现原生页面和包含可滑动区的第一页面的一致性。

[0122] 应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发申请中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本申请公开的技术方案所期望的结果，本文在此不进行限制。

[0123] 上述具体实施方式，并不构成对本申请保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本申请的精神和原则之内所作的修改、等同替换和改进等，均应包含在本申请保护范围之内。