CN113051016B - 页面显示方法、装置、设备和存储介质 - Google Patents

Abstract

本公开实施例涉及一种页面显示方法、装置、设备和存储介质。该方法包括：获取显示页面中目标显示区域的当前区域信息；该显示页面包含父控件对象，目标显示区域包含支持的滑动方向与父控件对象对应的滑动方向相同的第一子控件对象，且第一子控件对象由跨平台开发端渲染显示；检测显示页面中的滑动事件；若基于当前区域信息确定滑动事件处于目标显示区域，且确定滑动事件的滑动方向与第一子控件对象对应的滑动方向相同，则屏蔽父控件对象对滑动事件的处理，并由第一子控件对象处理滑动事件，以使跨平台开发端控制目标显示区域按照滑动事件的滑动方向滑动显示。解决了在原生端和跨平台开发端的混合开发中的页面滑动冲突问题，提高了页面呈现效果。

Description

页面显示方法、装置、设备和存储介质

技术领域

本公开涉及计算机技术领域，尤其涉及一种页面显示方法、装置、设备和存储介质。

背景技术

随着客户端业务功能越来越复杂以及显示屏幕越来越大，显示页面的呈现越来越复杂。如图1(a)所示，在显示页面100中显示有可左右滑动以切换不同页面的页面切换父控件110，在页面切换父控件110中嵌套有可左右滑动以切换不同子页面的页面切换子控件120。如果用户在页面切换子控件120所在区域中向左/右滑动，很可能会造成页面切换父控件110和页面切换子控件120之间的滑动冲突，例如未滑动子页面而直接切换了整个页面，如图1(b)所示，或者整个页面和子页面均有小幅度滑动，但是均未成功切换页面，如图1(c)所示。

而且，为了兼容多种开发平台，目前的页面控制多是利用ReactNative、Weex、Flutter等跨平台开发端实现。例如，上述页面切换子控件120通过原生view组件呈现给用户，但是其内的显示逻辑由Flutter跨平台开发端控制实现。基于跨平台开发端和原生端之间是隔离的，两者无法很好地协调处理具有操作冲突的情况，使得上述滑动冲突问题更加难以解决。

发明内容

为了解决上述技术问题或者至少部分地解决上述技术问题，本公开提供了一种页面显示方法、装置、设备和存储介质。

本公开实施例提供了一种页面显示方法，该方法包括：

获取显示页面中目标显示区域的当前区域信息；其中，所述显示页面包含父控件对象，所述目标显示区域包含第一子控件对象，所述第一子控件对象支持滑动的滑动方向与所述父控件对象支持滑动的滑动方向相同，且所述第一子控件对象由跨平台开发端渲染显示；

检测所述显示页面中的滑动事件；

若基于所述当前区域信息确定所述滑动事件处于所述目标显示区域，且确定所述滑动事件的滑动方向与所述第一子控件对象对应的滑动方向相同，则屏蔽所述父控件对象对所述滑动事件的处理操作，并由所述第一子控件对象处理所述滑动事件，以使所述跨平台开发端控制所述目标显示区域基于所述滑动事件按照所述第一子控件对象对应的滑动方向滑动显示。

本公开实施例还提供了一种页面显示装置，该装置包括：

当前区域信息获取模块，用于获取显示页面中目标显示区域的当前区域信息；其中，所述显示页面包含父控件对象，所述目标显示区域包含第一子控件对象，所述第一子控件对象支持滑动的滑动方向与所述父控件对象支持滑动的滑动方向相同，且所述第一子控件对象由跨平台开发端渲染显示；

滑动事件检测模块，用于检测所述显示页面中的滑动事件；

滑动冲突处理模块，用于若基于所述当前区域信息确定所述滑动事件处于所述目标显示区域，且确定所述滑动事件的滑动方向与所述第一子控件对象对应的滑动方向相同，则屏蔽所述父控件对象对所述滑动事件的处理操作，并由所述第一子控件对象处理所述滑动事件，以使所述跨平台开发端控制所述目标显示区域基于所述滑动事件按照所述第一子控件对象对应的滑动方向滑动显示。

本公开实施例还提供了一种的电子设备，该电子设备包括：

处理器和存储器；

所述处理器通过调用所述存储器存储的程序或指令，用于执行本公开任意实施例中所述页面显示方法的步骤。

本公开实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储程序或指令，所述程序或所述指令使计算机执行本公开任意实施例中所述页面显示方法的步骤。

本公开实施例提供的页面显示方案，通过获取显示页面中目标显示区域的当前区域信息；其中，显示页面包含父控件对象，目标显示区域包含第一子控件对象，第一子控件对象支持滑动的滑动方向与父控件对象支持滑动的滑动方向相同，且第一子控件对象由跨平台开发端渲染显示；检测显示页面中的滑动事件；若基于当前区域信息确定滑动事件处于目标显示区域，且确定滑动事件的滑动方向与第一子控件对象对应的滑动方向相同，则屏蔽父控件对象对滑动事件的处理操作，并由第一子控件对象处理滑动事件，以使跨平台开发端控制目标显示区域基于滑动事件按照第一子控件对象对应的滑动方向滑动显示。实现了在原生端和跨平台开发端的混合开发中，当父控件和子控件之间存在滑动冲突时，屏蔽目标显示区域(即滑动冲突区域)中父控件对象的原生端滑动事件处理流程，而由子控件处理滑动事件，以触发跨平台开发端执行滑动事件来控制目标显示区域的滑动显示，解决了该场景下的滑动冲突问题，提高了页面显示的正确性和页面呈现效果，从而提升用户使用体验。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。

为了更清楚地说明本公开实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为现有技术中的一种存在滑动冲突的页面左右滑动显示效果示意图；

图2为本公开实施例提供的一种页面显示方法的流程示意图；

图3为本公开实施例提供的一种解决滑动冲突的页面左右滑动显示效果示意图；

图4为本公开实施例提供的又一种页面显示方法的流程示意图；

图5为本公开实施例提供的一种页面上下滑动显示效果示意图；

图6为本公开实施例提供的一种页面显示装置的结构示意图；

图7为本公开实施例提供的一种电子设备的结构示意图。

具体实施方式

为了能够更清楚地理解本公开的上述目的、特征和优点，下面将对本公开的方案进行进一步的详细描述。需要说明的是，在不冲突的情况下，本公开的实施例及实施例中的特征可以相互组合。

在下面的描述中阐述了很多具体细节以便于充分理解本公开，但本公开还可以采用其他不同于在此描述的方式来实施；显然，说明书中的实施例只是本公开的一部分实施例，而不是全部的实施例。

本公开实施例提供的页面显示方法，主要适用于页面嵌套不同控件且控件之间存在滑动冲突问题的页面显示场景，尤其适用于控件显示逻辑由跨平台开发端实现的混合开发页面显示场景。本公开实施例提供的页面显示方法可以由页面显示装置来执行，该装置可以由软件和/或硬件的方式实现，该装置可以集成在具有页面显示功能的电子设备中，例如手机、掌上电脑、平板电脑、笔记本电脑或台式电脑等。

图2是本公开实施例提供的一种页面显示方法的流程图。参见图1，该页面显示方法具体包括：

S110、获取显示页面中目标显示区域的当前区域信息。

其中，目标显示区域是指存在滑动冲突的区域，其是显示页面对应区域中的子区域。显示页面包含父控件对象，目标显示区域包含第一子控件对象，第一子控件对象支持滑动的滑动方向与父控件对象支持滑动的滑动方向相同，且第一子控件对象由跨平台开发端渲染显示。参见图3(a)，显示页面300中包含父控件对象310和目标显示区域330，目标显示区域330中包含第一子控件对象320。父控件对象310和第一子控件对象320均支持左右滑动以切换页面。当前区域信息是指当前时刻目标显示区域的区域信息。区域信息用于表征目标显示区域的区域属性，例如区域的高度、宽度及其在显示页面中的位置等。

在一些实施例中，父控件对象和第一子控件对象为安卓系统中的原生组件，跨平台开发端为Flutter跨平台开发工具。以原生端为Android系统，跨平台开发端为Flutter开发工具为例，上述父控件对象为Android中的ViewPager对象，第一子控件对象为Android提供的FlutterView对象，而FlutterView对象中的渲染显示逻辑由Flutter跨平台开发工具实现。

具体地，页面显示装置获取显示页面300中的目标显示区域330的当前区域信息，其获取方式可以是从本地存储空间中读取，也可以是从Flutter跨平台开发工具拉取。该当前区域信息用于后续流程中判断是否执行滑动冲突的处理逻辑。

S120、检测显示页面中的滑动事件。

具体地，如果用户在客户端屏幕上进行了触摸滑动，那么页面显示装置就可以检测到显示页面上发生的滑动事件，以便对该滑动事件进行响应。

S130、若基于当前区域信息确定滑动事件处于目标显示区域，且确定滑动事件的滑动方向与第一子控件对象对应的滑动方向相同，则屏蔽父控件对象对滑动事件的处理操作，并由第一子控件对象处理滑动事件，以使跨平台开发端控制目标显示区域基于滑动事件按照第一子控件对象对应的滑动方向滑动显示。

具体地，页面显示装置需要先判断该滑动事件是否会引起滑动冲突，才能对其正确响应。页面显示装置根据当前区域信息和滑动事件的事件信息来判断该滑动事件是否发生在目标显示区域。并且，页面显示装置还根据滑动事件的滑动方向和第一子控件对象支持滑动的滑动方向判断两者是否一致。如果滑动事件发生在目标显示区域，并且其滑动方向和第一子控件对象对应的滑动方向一致，那么就必然会造成滑动冲突问题，此时需要触发滑动冲突处理逻辑，确保第一子控件对象消费该滑动事件。基于父控件对象先于第一子控件对象获取到滑动事件，页面显示装置需要屏蔽父控件对象对滑动事件的消费流程，以便该滑动事件可以传输至第一子控件对象。第一子控件对象接收到滑动事件后触发事件消费操作，将滑动事件传输至跨平台开发端。跨平台开发端则执行滑动事件的消费流程，控制第一子控件对象按照滑动事件的滑动方向来滑动显示。

参见图3，父控件对象310和第一子控件对象320支持滑动的滑动方向均是横向滑动(向左/向右滑动)。当用户在图3(a)中的目标显示区域330中进行向左滑动操作后，页面显示装置会检测到向左滑动的滑动事件，并经过上述滑动冲突的处理逻辑，可获得图3(b)所示的显示结果，即父控件对象310的显示页面不变，而第一子控件对象320由第一个子页面切换至第二个子页面。

在一些实施例中，基于当前区域信息，确定滑动事件处于目标显示区域包括：基于滑动事件的事件触发位置确定事件触发范围，且基于当前区域信息中的区域位置和区域宽高确定区域范围；若事件触发范围处于区域范围内，则确定滑动事件处于目标显示区域。具体地，页面显示装置根据滑动事件的触发位置确定出滑动范围(即实践触发范围)，而根据当前区域信息中的区域位置、区域宽度和区域高度(即区域宽高)确定出目标显示区域的区域范围。如果事件触发范围在区域范围之外，或者事件触发范围部分在区域范围之外，那么可确定滑动事件未处于目标显示区域。如果事件触发范围在区域范围之内，那么确定滑动事件处于目标显示区域。这样可以更加快捷地判断滑动事件与目标显示区域的关系，从而提高对滑动事件的响应速度，进而提高页面显示效率。

本公开实施例的上述技术方案，通过获取显示页面中目标显示区域的当前区域信息；其中，显示页面包含父控件对象，目标显示区域包含第一子控件对象，第一子控件对象支持滑动的滑动方向与父控件对象支持滑动的滑动方向相同，且第一子控件对象由跨平台开发端渲染显示；检测显示页面中的滑动事件；若基于当前区域信息确定滑动事件处于目标显示区域，且确定滑动事件的滑动方向与第一子控件对象对应的滑动方向相同，则屏蔽父控件对象对滑动事件的处理操作，并由第一子控件对象处理滑动事件，以使跨平台开发端控制目标显示区域基于滑动事件按照第一子控件对象对应的滑动方向滑动显示。实现了在原生端和跨平台开发端的混合开发中，当父控件和子控件之间存在滑动冲突时，屏蔽目标显示区域(即滑动冲突区域)中父控件对象的原生端滑动事件处理流程，而由子控件处理滑动事件，以触发跨平台开发端执行滑动事件来控制目标显示区域的滑动显示，解决了该场景下的滑动冲突问题，提高了页面显示的正确性和页面呈现效果，从而提升用户使用体验。

图4是本公开实施例提供的又一种页面显示方法的流程图。该页面显示方法中对“屏蔽父控件对象对滑动事件的处理操作，并由第一子控件对象处理滑动事件，以使跨平台开发端控制目标显示区域基于滑动事件按照第一子控件对象对应的滑动方向滑动显示”进行了进一步优化。在此基础上，可进一步增加显示页面中第二子控件对象及其滑动显示的相关内容。在上述基础上，还可以进一步增加更新当前区域信息的相关内容。其中与上述各实施例相同或相应的术语的解释在此不再赘述。参见图4，该页面显示方法包括：

S210、获取显示页面中目标显示区域的当前区域信息。

S220、检测显示页面中的滑动事件。

S230、若基于当前区域信息确定滑动事件处于目标显示区域，且确定滑动事件的滑动方向与第一子控件对象对应的滑动方向相同，则调用第一子控件对象的事件拦截函数，以使父控件对象不拦截滑动事件。

其中，第一子控件对象通过继承原生子控件类而获得，事件拦截函数通过重写原生子控件类中的相应函数而获得。以原生端为Android系统，跨平台开发端为Flutter开发工具，第一子控件对象为FlutterView对象为例，第一子控件对象是自定义的FlutterView对象，其继承自Android提供的FlutterView类，且重写了其中的事件拦截函数requestDisallowInterceptTouchEvent()，以便其可通知父控件对象不拦截滑动事件。

具体地，触发了滑动冲突处理逻辑后，页面显示装置调用第一子控件对象的事件拦截函数，即requestDisallowInterceptTouchEvent(true)，以通知父控件对象ViewPager不拦截滑动事件，以便滑动事件能够传输至第一子控件对象FlutterView。

S240、调用第一子控件对象的事件处理函数，将滑动事件传输至跨平台开发端，以使跨平台开发端控制目标显示区域基于滑动事件按照第一子控件对象对应的滑动方向滑动显示。

具体地，滑动事件传输至第一子控件对象后，页面显示装置调用第一子控件对象FlutterView的事件处理函数onTouchEvent()。事件处理函数返回true，表明其已消费该滑动事件，同时通过Android原生端与Flutter跨平台开发工具之间的通信通道，将滑动事件传输至Flutter跨平台开发工具，以便Flutter跨平台开发工具控制目标显示区域按照滑动事件的滑动方向滑动显示。

S250、若确定滑动事件的滑动方向与第二子控件对象对应的滑动方向相同，则由第二子控件对象处理滑动事件，以使跨平台开发端控制第二子控件对象对应的显示区域基于滑动事件按照第二子控件对象对应的滑动方向滑动显示。

其中，显示页面包含第二子控件对象，第二子控件对象支持滑动的滑动方向和父控件对象支持滑动的滑动方向垂直，且第二子控件对象由跨平台开发端渲染显示。参见图5(a)，显示页面500中除了父控件对象510、目标显示区域530及其中的第一子控件对象520之外，还包含第二子控件对象540。该第二子控件对象540支持滑动的滑动方向是上下滑动的，其与父控件对象支持滑动的左右滑动方向垂直。而且第二子控件对象540也是Android系统提供的原生组件，如ScrollView对象，但是ScrollView对象中的渲染显示逻辑由Flutter跨平台开发工具实现。

具体地，如果页面显示装置识别出滑动事件的滑动方向与第二子控件对象对应的滑动方向相同，那么就不会触发滑动冲突处理逻辑，而是直接由第二子控件对象接收并处理滑动事件。第二子控件对象同样可调用其事件处理函数onTouchEvent()，以表明其已消费该滑动事件，同时通过Android原生端与Flutter跨平台开发工具之间的通信通道，将滑动事件传输至Flutter跨平台开发工具，以便Flutter跨平台开发工具控制第二子控件对象对应的显示区域按照滑动事件的滑动方向滑动显示。

参见图5(a)，当用户进行向下滑动操作后，页面显示装置会检测到向下滑动的滑动事件，并经过S250的处理，可获得图5(b)所示的显示结果，即父控件对象510的显示页面不变，第二子控件对象540对应的显示区域550中的显示条目向上滚动显示。

需要说明的是，目标显示区域530和第一子控件对象520可随着第二子控件对象540的滑动而一同滑动直至消失在显示页面中，如图5(b)所示。目标显示区域530和第一子控件对象520也可以在显示页面中固定不变，而只有第二子控件对象540对应的显示区域550中的显示条目随着滑动操作而变动。

S260、接收跨平台开发端发送的目标显示区域的新的区域信息，并利用新的区域信息更新当前区域信息；其中，目标显示区域随第二子控件对象对应的显示区域同方向滑动；新的区域信息由跨平台开发端基于当前区域信息和滑动事件对应的滑动距离确定。

具体地，如果目标显示区域530和第一子控件对象520随着第二子控件对象540的滑动而一同滑动，那么目标显示区域在显示页面中的位置是变动的。当目标显示区域随着滑动操作而消失在显示页面后，如果用户再次在原本的目标显示区域的区域范围内进行了向左/向右的滑动操作时，其应当不触发滑动冲突的处理逻辑，而应由父控件对象510处理该滑动事件，以切换不同的显示页面。在这种情况下，如果无法更新当前区域信息，那么按照上述S230～S240的处理逻辑，会造成父控件对象510的页面切换失败。所以，Flutter跨平台开发工具在处理S250中传输的滑动事件的同时，需要监听第二子控件对象540的滑动，获取其滑动距离，并利用该滑动距离和当前区域信息计算目标显示区域在显示页面中的新的区域位置，并将该新的区域位置、区域宽度和区域高度作为新的区域信息传输至Android原生端的页面显示装置。页面显示装置则在接收到新的区域信息后，及时利用新的区域信息覆盖当前区域信息。这样可以在目标显示区域随着滑动而变更位置后，避免父控件对象的页面切换失败的问题，从而进一步提高滑动操作的正确响应率，进一步提高页面呈现效果。

在一些实施例中，滑动距离为滑动事件开始至滑动事件结束时对应的总滑动距离。本实施例中，并非每滑动一个像素均更新当前区域信息，而是从滑动操作开始到滑动操作停止时才将新的区域信息传输至原生端。这是因为用户手指的移动速度有限，用户手指离开屏幕再触摸新的位置的时间远大于区域信息传输的时延，当用户手指重新去触摸滑动时，目标显示区域的区域信息已经是最新的区域信息了，不会影响滑动事件的响应过程。另外，跨平台开发端和原生端之间频繁的通信会占用资源，容易造成性能损耗，故上述处理方式也可降低性能损耗。

本公开实施例的上述技术方案，通过调用第一子控件对象的重写的事件拦截函数，以使父控件对象不拦截滑动事件；调用第一子控件对象的事件处理函数，将滑动事件传输至跨平台开发端，以使跨平台开发端控制目标显示区域基于滑动事件按照第一子控件对象的滑动方向滑动显示。实现了通过重写Android系统中第一子控件对象FlutterView的事件拦截函数，以在判定触发滑动冲突处理逻辑的情况下通知父控件对象不拦截滑动事件，从而更加准确且快捷地屏蔽父控件对象对滑动事件的响应操作。通过若确定滑动事件的滑动方向与第二子控件对象对应的滑动方向相同，则由第二子控件对象处理滑动事件，以使跨平台开发端控制第二子控件对象对应的显示区域基于滑动事件按照第二子控件对象对应的滑动方向滑动显示；且在目标显示区域随第二子控件对象对应的显示区域同方向滑动时，接收跨平台开发端发送的目标显示区域的新的区域信息，并利用新的区域信息更新当前区域信息。实现了在未触发滑动冲突处理逻辑的情况下处理滑动事件，确保了滑动事件的响应效率；并且能够随着滑动操作及时更新目标显示区域的区域信息，避免目标显示区域在显示页面消失后仍触发滑动冲突处理逻辑而导致的滑动事件响应错误的问题，进一步提高了对滑动事件的响应正确性和响应速度，从而进一步提高页面呈现效果。

图6为本公开实施例提供的一种页面显示装置的结构示意图。如图6所示，该装置包括：

当前区域信息获取模块610，用于获取显示页面中目标显示区域的当前区域信息；其中，显示页面包含父控件对象，目标显示区域包含第一子控件对象，第一子控件对象支持滑动的滑动方向与父控件对象支持滑动的滑动方向相同，且第一子控件对象由跨平台开发端渲染显示；

滑动事件检测模块620，用于检测显示页面中的滑动事件；

滑动冲突处理模块630，用于若基于当前区域信息确定滑动事件处于目标显示区域，且确定滑动事件的滑动方向与第一子控件对象对应的滑动方向相同，则屏蔽父控件对象对滑动事件的处理操作，并由第一子控件对象处理滑动事件，以使跨平台开发端控制目标显示区域基于滑动事件按照第一子控件对象对应的滑动方向滑动显示。

在一些实施例中，滑动冲突处理模块630包括滑动事件发生位置判断子模块，用于：

基于滑动事件的事件触发位置确定事件触发范围，且基于当前区域信息中的区域位置和区域宽高确定区域范围；

若事件触发范围处于区域范围内，则确定滑动事件处于目标显示区域。

在一些实施例中，滑动冲突处理模块630包括滑动冲突处理子模块，用于：

调用第一子控件对象的事件拦截函数，以使父控件对象不拦截滑动事件；其中，第一子控件对象通过继承原生子控件类而获得，事件拦截函数通过重写原生子控件类中的相应函数而获得；

调用第一子控件对象的事件处理函数，将滑动事件传输至跨平台开发端，以使跨平台开发端控制目标显示区域基于滑动事件按照第一子控件对象对应的滑动方向滑动显示。

在一些实施例中，显示页面包含第二子控件对象，第二子控件对象支持滑动的滑动方向和父控件对象支持滑动的滑动方向垂直，且第二子控件对象由跨平台开发端渲染显示；

相应地，页面显示装置还包括滑动事件处理模块，用于：

在检测显示页面中的滑动事件之后，若确定滑动事件的滑动方向与第二子控件对象对应的滑动方向相同，则由第二子控件对象处理滑动事件，以使跨平台开发端控制第二子控件对象对应的显示区域基于滑动事件按照第二子控件对象对应的滑动方向滑动显示。

在一些实施例中，目标显示区域随第二子控件对象对应的显示区域同方向滑动；

相应地，页面显示装置还包括当前区域信息更新模块，用于：

在由第二子控件对象处理滑动事件，以使跨平台开发端控制第二子控件对象对应的显示区域基于滑动事件按照第二子控件对象对应的滑动方向滑动显示之后，接收跨平台开发端发送的目标显示区域的新的区域信息，并利用新的区域信息更新当前区域信息；

其中，新的区域信息由跨平台开发端基于当前区域信息和滑动事件对应的滑动距离确定。

在一些实施例中，滑动距离为滑动事件开始至滑动事件结束时对应的总滑动距离。

在一些实施例中，父控件对象、第一子控件对象和第二子控件对象为安卓系统中的原生组件，跨平台开发端为Flutter跨平台开发工具。

通过本公开实施例提供的一种页面显示装置，实现了在原生端和跨平台开发端的混合开发中，当父控件和子控件之间存在滑动冲突时，屏蔽目标显示区域(即滑动冲突区域)中父控件对象的原生端滑动事件处理流程，而由子控件处理滑动事件，以触发跨平台开发端执行滑动事件来控制目标显示区域的滑动显示，解决了该场景下的滑动冲突问题，提高了页面显示的正确性和页面呈现效果，从而提升用户使用体验。

本公开实施例所提供的页面显示装置可执行本公开任意实施例所提供的页面显示方法，具备执行方法相应的功能模块和有益效果。

值得注意的是，上述页面显示装置的实施例中，所包括的各个模块和子模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能模块/子模块的具体名称也只是为了便于相互区分，并不用于限制本公开的保护范围。

图7为本公开实施例提供的一种电子设备的结构示意图。如图7所示，电子设备700包括一个或多个处理器701和存储器702。

处理器701可以是中央处理单元(CPU)或者具有数据处理能力和/或指令执行能力的其他形式的处理单元，并且可以控制电子设备700中的其他组件以执行期望的功能。

存储器702可以包括一个或多个计算机程序产品，所述计算机程序产品可以包括各种形式的计算机可读存储介质，例如易失性存储器和/或非易失性存储器。所述易失性存储器例如可以包括随机存取存储器(RAM)和/或高速缓冲存储器(cache)等。所述非易失性存储器例如可以包括只读存储器(ROM)、硬盘、闪存等。在所述计算机可读存储介质上可以存储一个或多个计算机程序指令，处理器701可以运行所述程序指令，以实现上文所说明的本公开实施例的页面显示方法以及/或者其他期望的功能。在所述计算机可读存储介质中还可以存储诸如目标显示区域的区域信息、滑动距离等各种内容。

在一个示例中，电子设备700还可以包括：输入装置703和输出装置704，这些组件通过总线系统和/或其他形式的连接机构(未示出)互连。该输入装置703可以包括例如键盘、鼠标等等。该输出装置704可以向外部输出各种信息，包括页面滑动显示结果等。该输出装置704可以包括例如显示器、扬声器、打印机、以及通信网络及其所连接的远程输出设备等等。

当然，为了简化，图7中仅示出了该电子设备700中与本公开有关的组件中的一些，省略了诸如总线、输入/输出接口等等的组件。除此之外，根据具体应用情况，电子设备700还可以包括任何其他适当的组件。

除了上述方法和设备以外，本公开的实施例还可以是计算机程序产品，其包括计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本公开实施例所提供的页面显示方法的步骤。

所述计算机程序产品可以以一种或多种程序设计语言的任意组合来编写用于执行本公开实施例操作的程序代码，所述程序设计语言包括面向对象的程序设计语言，诸如Java、C++等，还包括常规的过程式程序设计语言，诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。

此外，本公开的实施例还可以是计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本公开实施例所提供的页面显示方法的步骤。

所述计算机可读存储介质可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以包括但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

需要说明的是，本公开所用术语仅为了描述特定实施例，而非限制本申请范围。如本公开说明书和权利要求书中所示，除非上下文明确提示例外情形，“一”、“一个”、“一种”和/或“该”等词并非特指单数，也可包括复数。术语“和/或”包括一个或多个相关所列条目的任何一个和所有组合。诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法或者设备中还存在另外的相同要素。

以上所述仅是本公开的具体实施方式，使本领域技术人员能够理解或实现本公开。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本公开的精神或范围的情况下，在其它实施例中实现。因此，本公开将不会被限制于本文所述的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (10)

1.一种页面显示方法，其特征在于，包括：

获取显示页面中目标显示区域的当前区域信息；其中，所述显示页面包含父控件对象，所述目标显示区域包含第一子控件对象，所述第一子控件对象支持滑动的滑动方向与所述父控件对象支持滑动的滑动方向相同，且所述第一子控件对象由跨平台开发端渲染显示；

检测所述显示页面中的滑动事件；

若基于所述当前区域信息确定所述滑动事件处于所述目标显示区域，且确定所述滑动事件的滑动方向与所述第一子控件对象对应的滑动方向相同，则屏蔽所述父控件对象对所述滑动事件的处理操作，并由所述第一子控件对象处理所述滑动事件，以使所述跨平台开发端控制所述目标显示区域基于所述滑动事件按照所述第一子控件对象对应的滑动方向滑动显示。

2.根据权利要求1所述的方法，其特征在于，所述基于所述当前区域信息，确定所述滑动事件处于所述目标显示区域包括：

基于所述滑动事件的事件触发位置确定事件触发范围，且基于所述当前区域信息中的区域位置和区域宽高确定区域范围；

若所述事件触发范围处于所述区域范围内，则确定所述滑动事件处于所述目标显示区域。

3.根据权利要求1所述的方法，其特征在于，所述屏蔽所述父控件对象对所述滑动事件的处理操作，并由所述第一子控件对象处理所述滑动事件，以使所述跨平台开发端控制所述目标显示区域基于所述滑动事件按照所述第一子控件对象对应的滑动方向滑动显示包括：

调用所述第一子控件对象的事件拦截函数，以使所述父控件对象不拦截所述滑动事件；其中，所述第一子控件对象通过继承原生子控件类而获得，所述事件拦截函数通过重写所述原生子控件类中的相应函数而获得；

调用所述第一子控件对象的事件处理函数，将所述滑动事件传输至所述跨平台开发端，以使所述跨平台开发端控制所述目标显示区域基于所述滑动事件按照所述第一子控件对象对应的滑动方向滑动显示。

4.根据权利要求1所述的方法，其特征在于，所述显示页面包含第二子控件对象，所述第二子控件对象支持滑动的滑动方向和所述父控件对象支持滑动的滑动方向垂直，且所述第二子控件对象由所述跨平台开发端渲染显示；

在所述检测所述显示页面中的滑动事件之后，所述方法还包括：

若确定所述滑动事件的滑动方向与所述第二子控件对象对应的滑动方向相同，则由所述第二子控件对象处理所述滑动事件，以使所述跨平台开发端控制所述第二子控件对象对应的显示区域基于所述滑动事件按照所述第二子控件对象对应的滑动方向滑动显示。

5.根据权利要求4所述的方法，其特征在于，所述目标显示区域随所述第二子控件对象对应的显示区域同方向滑动；

在所述由所述第二子控件对象处理所述滑动事件，以使所述跨平台开发端控制所述第二子控件对象对应的显示区域基于所述滑动事件按照所述第二子控件对象对应的滑动方向滑动显示之后，所述方法还包括：

接收所述跨平台开发端发送的所述目标显示区域的新的区域信息，并利用所述新的区域信息更新所述当前区域信息；

其中，所述新的区域信息由所述跨平台开发端基于所述当前区域信息和所述滑动事件对应的滑动距离确定。

6.根据权利要求5所述的方法，其特征在于，所述滑动距离为所述滑动事件开始至所述滑动事件结束时对应的总滑动距离。

7.根据权利要求4所述的方法，其特征在于，所述父控件对象、所述第一子控件对象和所述第二子控件对象为安卓系统中的原生组件，所述跨平台开发端为Flutter跨平台开发工具。

8.一种页面显示装置，其特征在于，包括：

当前区域信息获取模块，用于获取显示页面中目标显示区域的当前区域信息；其中，所述显示页面包含父控件对象，所述目标显示区域包含第一子控件对象，所述第一子控件对象支持滑动的滑动方向与所述父控件对象支持滑动的滑动方向相同，且所述第一子控件对象由跨平台开发端渲染显示；

滑动事件检测模块，用于检测所述显示页面中的滑动事件；

滑动冲突处理模块，用于若基于所述当前区域信息确定所述滑动事件处于所述目标显示区域，且确定所述滑动事件的滑动方向与所述第一子控件对象对应的滑动方向相同，则屏蔽所述父控件对象对所述滑动事件的处理操作，并由所述第一子控件对象处理所述滑动事件，以使所述跨平台开发端控制所述目标显示区域基于所述滑动事件按照所述第一子控件对象对应的滑动方向滑动显示。

9.一种电子设备，其特征在于，所述电子设备包括：

处理器和存储器；

所述处理器通过调用所述存储器存储的程序或指令，用于执行如权利要求1至7任一项所述方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储程序或指令，所述程序或指令使计算机执行如权利要求1至7任一项所述方法的步骤。

Images