CN111767002B - 页面展示方法、装置、设备及存储介质 - Google Patents

Abstract

本发明提供一种页面展示方法、装置、设备及存储介质，该方法，包括：子控件监听针对页面的滑动事件；若监听到滑动事件，则生成滑动指令，并判断父控件的显示区是否滑到边界；若所述父控件的显示区滑到边界，则控制所述子控件的显示区根据所述滑动指令按照预设方向滑动显示；若所述父控件的显示区未滑到边界，则控制所述父控件的显示区根据所述滑动指令按照预设方向滑动显示。本发明可以有效地避免页面中子控件和父控件之间的滑动冲突问题，提高页面的呈现效果，用户体验佳。

Description

页面展示方法、装置、设备及存储介质

技术领域

本发明涉及电子技术领域，尤其涉及一种页面展示方法、装置、设备及存储介质。

背景技术

随着终端显示屏尺寸的增大，显示屏上呈现的页面也越来越复杂。

目前，对于页面的控制，一般采用ReactNative/Weex等跨平台解决方案，其通过JS渲染原生组件来访问原生端，以根据接收到的操作指令，控制页面展示效果。

但是，这种框架中，JS和原生端之间是隔离的，业务层没有办法直接执行所有针对原生端的数据和API。因此，当页面中的父控件中嵌套有同一显示方向的子控件时，子控件和父控件之间会存在操作冲突，从而影响页面的呈现效果，用户体验差。

发明内容

本发明提供一种页面展示方法、装置、设备及存储介质，可以有效地避免页面中子控件和父控件之间的滑动冲突问题，提高页面的呈现效果，用户体验佳。

第一方面，本发明实施例提供一种页面展示方法，包括：

通过子控件监听针对页面的滑动事件；

若监听到滑动事件，则生成滑动指令，并判断父控件的显示区是否滑到底部；

若所述父控件的显示区滑到边界，则控制所述子控件的显示区根据所述滑动指令按照预设方向滑动显示；

若所述父控件的显示区未滑到边界，则控制所述父控件的显示区根据所述滑动指令按照预设方向滑动显示。

在一种可能的设计中，在通过子控件监听针对页面的滑动事件之前，还包括：

在子控件中新增用于通知原生组件的标记属性；

在ReactNative框架初始化过程中，根据所述标记属性查找所述子控件对应的父控件。

在一种可能的设计中，在控制所述父控件的显示区根据所述滑动指令按照预设方向滑动显示之后，还包括：

判断所述父控件的显示区是否滑动到边界；

若所述父控件的显示区滑动到边界，则触发所述子控件的滑动函数；

根据所述子控件的滑动函数，控制所述子控件的显示区按照预设方向滑动显示。

在一种可能的设计中，在控制所述子控件的显示区根据所述滑动指令按照预设方向滑动显示之后，还包括：

判断所述子控件的显示区是否滑动到边界；

若所述子控件的显示区滑动到边界，则触发所述父控件的滑动函数；

根据所述父控件的滑动函数，控制所述父控件的显示区按照预设方向滑动显示。

在一种可能的设计中，通过子控件监听针对页面的滑动事件，包括：

响应针对页面的触控信号；

获取所述触控信号在页面上的位移，若位移大于预设阈值，则生成滑动事件。

第二方面，本发明实施例提供一种页面展示装置，包括：

监听模块，用于通过子控件监听针对页面的滑动事件；

判断模块，用于在监听到滑动事件时，生成滑动指令，并判断父控件的显示区是否滑到底部；

控制模块，用于在所述父控件的显示区滑到边界时，控制所述子控件的显示区根据所述滑动指令按照预设方向滑动显示；以及在所述父控件的显示区未滑到边界时，控制所述父控件的显示区根据所述滑动指令按照预设方向滑动显示。

在一种可能的设计中，还包括：

设置模块，用于在子控件中新增用于通知原生组件的标记属性；

在ReactNative框架初始化过程中，根据所述标记属性查找所述子控件对应的父控件。

在一种可能的设计中，控制模块，还用于：

判断所述父控件的显示区是否滑动到边界；

若所述父控件的显示区滑动到边界，则触发所述子控件的滑动函数；

根据所述子控件的滑动函数，控制所述子控件的显示区按照预设方向滑动显示。

在一种可能的设计中，控制模块，还用于：

判断所述子控件的显示区是否滑动到边界；

若所述子控件的显示区滑动到边界，则触发所述父控件的滑动函数；

根据所述父控件的滑动函数，控制所述父控件的显示区按照预设方向滑动显示。

在一种可能的设计中，所述监听模块，具体用于：

响应针对页面的触控信号；

获取所述触控信号在页面上的位移，若位移大于预设阈值，则生成滑动事件。

第三方面，本发明实施例提供一种页面展示设备，包括：存储器和处理器，存储器中存储有所述处理器的可执行指令；其中，所述处理器配置为经由执行所述可执行指令来执行第一方面中任一项所述的页面展示方法。

第四方面，本发明实施例提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现第一方面中任一项所述的页面展示方法。

第五方面，本发明实施例提供一种程序产品，所述程序产品包括：计算机程序，所述计算机程序存储在可读存储介质中，服务器的至少一个处理器可以从所述可读存储介质读取所述计算机程序，所述至少一个处理器执行所述计算机程序使得服务器执行第一方面中任一所述的页面展示方法。

本发明提供一种页面展示方法、装置、设备及存储介质，通过子控件监听针对页面的滑动事件；若监听到滑动事件，则生成滑动指令，并判断父控件的显示区是否滑到边界；若所述父控件的显示区滑到边界，则控制所述子控件的显示区根据所述滑动指令按照预设方向滑动显示；若所述父控件的显示区未滑到边界，则控制所述父控件的显示区根据所述滑动指令按照预设方向滑动显示。本发明可以有效地避免页面中子控件和父控件之间的滑动冲突问题，提高页面的呈现效果，用户体验佳。

附图说明

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

图1为本发明一应用场景的原理示意图；

图2为本发明实施例一提供的页面展示方法的流程图；

图3为本发明实施二提供的页面展示装置的结构示意图；

图4为本发明实施例三提供的页面展示设备的结构示意图。

通过上述附图，已示出本公开明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本公开构思的范围，而是通过参考特定实施例为本领域技术人员说明本公开的概念。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例例如能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、***、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

下面以具体地实施例对本发明的技术方案进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例不再赘述。

随着终端显示屏尺寸的增大，显示屏上呈现的页面也越来越复杂。

目前，对于页面的控制，一般采用ReactNative/Weex等跨平台解决方案，其通过JS(JavaScript，一种脚本语言)渲染原生组件来访问原生端，以根据接收到的操作指令，控制页面展示效果。但是，这种框架中，JS和原生端之间是隔离的，业务层没有办法直接执行所有针对原生端的数据和API(Application Program Interface，应用程序接口)。因此，当页面中的父控件中嵌套有同一显示方向的子控件时，子控件和父控件之间会存在操作冲突，从而影响页面的呈现效果，用户体验差。具体地，现有ReactNative对各种UI组件嵌套使用过程中的手势问题，没有提供任何解决方案，面对两个View组件都有手势事件时，没有办法将手势传递到子的组件，导致子组件的所有手势都失效。例如，如果有两个Scrollview嵌套在一起呈现在UI(User Interface，用户界面)上，子的scrollview的内容是没有办法滚动联动的，无法解决两个或者多个竖向或者横向的scrollview的手势问题，而对于横向和竖向之前嵌套则不存在手势问题。为了满足各种滑动的特效，这种同方向控件嵌套使用的例子越来越多。而原生***对于这种手势冲突也没有给出标准的设计方案，对于ReactNative平台，业务和原生的隔离，更是没有办法解决这种手势问题。

因此，本发明提供一种页面展示方法、装置、设备及存储介质，可以有效地避免页面中子控件和父控件之间的滑动冲突问题，提高页面的呈现效果，用户体验佳。

图1为本发明一应用场景的原理示意图，如图1所示，通过子控件监听针对页面的滑动事件；若监听到滑动事件，则生成滑动指令，并判断父控件的显示区是否滑到边界；若父控件的显示区滑到边界，则将滑动手势交由子控件处理，控制子控件的显示区根据滑动指令按照预设方向滑动显示；若父控件的显示区未滑到边界，则将滑动手势交由父控件处理，控制父控件的显示区根据滑动指令按照预设方向滑动显示。若滑动手势交由子控件处理，则判断子控件的显示区是否滑到边界；若子控件的显示区滑到边界，则将滑动手势交由父控件处理，控制父控件的显示区根据滑动指令按照预设方向滑动显示；若子控件的显示区未滑到边界，则将滑动手势交由子控件处理，控制子控件的显示区根据滑动指令按照预设方向滑动显示。

应用上述方法可以有效地避免页面中子控件和父控件之间的滑动冲突问题，提高页面的呈现效果，用户体验佳。

下面以具体地实施例对本发明的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本发明的实施例进行描述。

图2为本发明实施例一提供的页面展示方法的流程图，如图2所示，本实施例中的方法可以包括：

S101、通过子控件监听针对页面的滑动事件。

本实施例中，为了解决页面中子控件和父控件之间的滑动冲突问题，以ReactNative中使用两个scrollview嵌套和scrollview联动的问题为例，形成一套统一的解决方案，让业务不再需要关心手势相关的处理，统一在框架层完成。需要说明的是，由于ReactNative的list等组件都是采用scrollview的实现，所以本方案适用于所有的list组件。首先，终端响应针对页面的触控信号；获取触控信号在页面上的位移，若位移大于预设阈值，则生成滑动事件，子控件通过监听得到该滑动事件。具体地，ScrollView子控件需要监听onTouchEvent事件，记录两次触控之间的位移量。

可选地，在通过子控件监听针对页面的滑动事件之前，还包括：在子控件中新增用于通知原生组件的标记属性；在ReactNative框架初始化过程中，根据标记属性查找子控件对应的父控件。

具体地，本实施例对ReactNative ScrollView组件新增一个属性接口，ReactNative sdk原生端获取到属性值后，来处理父的ScrollView和子的ScrollView的手势事件。在ReactNative js lib库的ScrollView中增加一个新的属性passToChildren，目的是为了让业务侧使用该属性通知到原生组件侧，存在嵌套scroll。由于所有的ReactNative js组件都会对应到一个原生端的组件，Scrollview组件也不例外，会对应到客户端ReactScrollView/ReactHorizontalScrollVie及ReactScrollViewManager/ReactHorizontalScrollViewManager，其中这两个Manager是js和原生两个scrollview沟通的桥梁。因此，本实施例中定义的passToChildren属性，js侧默认会传递到两个mananger，然后将这个标记值传递到对应scrollview。ReactScrollView/ReactHorizontalScroll在收到passToChildren这个属性值后，通过平台View.getParent遍历整个UI树，找到对应的父的ReactScrollView/ReactHorizontalScrollView，并将子ReactScrollView/ReactHorizontalScrollView作为变量传递到父的View中来建立UI class的绑定关系。

S102、若监听到滑动事件，则生成滑动指令，并判断父控件的显示区是否滑到边界。

本实施例中，定义了一套判断ScrollView滑动到底部的算法，获取当前scrollview滑动的postion,如果position高度大于等于该scrollview填充内容减去scrollview的高度，即为滑动到了该scrollview的底部。由于***的事件传递规则是从父传到子的view，所以优先会到父ReactScrollView/ReactHorizontalScrollView中。因此，在子和父的ReactScrollView/ReactHorizontalScrollView中，重写onInterceptTouchEvent接口，用于判断手势事件优先传递给哪个组件。可以在子控件scrollview中的onInterceptTouch Event事件中判断父控件scrollview有没有滑动到底部。当父控件scrollview滑动到底部，则默认拦截该事件，并调用父控件scrollviewrequestDisallow InterceptTouchEvent(true)方法来禁止父控件scrollview拦截事件。如果父控件scrollview没有滑动到底部，则按***默认的规则由父控件scrollview获取事件。

S103、若父控件的显示区滑到边界，则控制子控件的显示区根据滑动指令按照预设方向滑动显示。

本实施例中，若父控件scrollview拦截到触发事件，但父控件scrollview滑动到底部后，如果继续往上滑动事件应该轮动到子控件scrollview。由于***中一旦接受到是哪个控件拦截事件后，就不能传递到其他控件。因此，可以将父控件scrollview接受到的滑动事件默认传递到子控scrollview。

通过监听onTouchEvent事件，记录两次触控之间的位移量，并调用子控件scrollview的滑动函数smoothScrollBy(delta)来滑动子的组件，而父的scrollview默认要return false消耗该事件。

可选地，在控制子控件的显示区根据滑动指令按照预设方向滑动显示之后，还包括：判断子控件的显示区是否滑动到边界；若子控件的显示区滑动到边界，则触发父控件的滑动函数；根据父控件的滑动函数，控制父控件的显示区按照预设方向滑动显示。

具体地，若子控件scrollview拦截到触发事件，按照***的设计，后续所有的touch事件都只能在子控件scrollview中操作。当滑动过程向下滑动到子Scrollview顶部时，继续向下滑动，是需要触发父控件scrollview的轮动滑动的，这里需要获取到两次滑动到delta量，调用父控件scrollview的smoothScrollBy(delta)来触发父控件scrollview的动画。

S104、若父控件的显示区未滑到边界，则控制父控件的显示区根据滑动指令按照预设方向滑动显示。

本实施例中，若父控件scrollview的显示区未滑到边界，则调用父控件scrollview的smoothScrollBy(delta)来触发父控件scrollview的动画。

可选地，在控制父控件的显示区根据滑动指令按照预设方向滑动显示之后，还包括：判断父控件的显示区是否滑动到边界；若父控件的显示区滑动到边界，则触发子控件的滑动函数；根据子控件的滑动函数，控制子控件的显示区按照预设方向滑动显示。

本实施例，通过子控件监听针对页面的滑动事件；若监听到滑动事件，则生成滑动指令，并判断父控件的显示区是否滑到边界；若父控件的显示区滑到边界，则控制子控件的显示区根据滑动指令按照预设方向滑动显示；若父控件的显示区未滑到边界，则控制父控件的显示区根据滑动指令按照预设方向滑动显示。本发明可以有效地避免页面中子控件和父控件之间的滑动冲突问题，提高页面的呈现效果，用户体验佳。

图3为本发明实施二提供的页面展示装置的结构示意图，如图3所示，本实施例的页面展示装置可以包括：

监听模块31，用于通过子控件监听针对页面的滑动事件；

判断模块32，用于在监听到滑动事件时，生成滑动指令，并判断父控件的显示区是否滑到底部；

控制模块33，用于在父控件的显示区滑到边界时，控制子控件的显示区根据滑动指令按照预设方向滑动显示；以及在父控件的显示区未滑到边界时，控制父控件的显示区根据滑动指令按照预设方向滑动显示。

在一种可能的设计中，还包括：

设置模块34，用于在子控件中新增用于通知原生组件的标记属性；

在ReactNative框架初始化过程中，根据标记属性查找子控件对应的父控件。

在一种可能的设计中，控制模块33，还用于：

判断父控件的显示区是否滑动到边界；

若父控件的显示区滑动到边界，则触发子控件的滑动函数；

根据子控件的滑动函数，控制子控件的显示区按照预设方向滑动显示。

在一种可能的设计中，控制模块33，还用于：

判断子控件的显示区是否滑动到边界；

若子控件的显示区滑动到边界，则触发父控件的滑动函数；

根据父控件的滑动函数，控制父控件的显示区按照预设方向滑动显示。

在一种可能的设计中，监听模块31，具体用于：

响应针对页面的触控信号；

获取触控信号在页面上的位移，若位移大于预设阈值，则生成滑动事件。

本实施例的页面展示装置，可以执行图2所示方法中的技术方案，其具体实现过程和技术原理参见图2所示方法中的相关描述，此处不再赘述。

本实施例，通过子控件监听针对页面的滑动事件；若监听到滑动事件，则生成滑动指令，并判断父控件的显示区是否滑到边界；若父控件的显示区滑到边界，则控制子控件的显示区根据滑动指令按照预设方向滑动显示；若父控件的显示区未滑到边界，则控制父控件的显示区根据滑动指令按照预设方向滑动显示。本发明可以有效地避免页面中子控件和父控件之间的滑动冲突问题，提高页面的呈现效果，用户体验佳。

图4为本发明实施例三提供的页面展示设备的结构示意图，如图4所示，本实施例的页面展示设备40可以包括：处理器41和存储器42。

存储器42，用于存储程序；存储器42，可以包括易失性存储器(英文：volatilememory)，例如随机存取存储器(英文：random-access memory，缩写：RAM)，如静态随机存取存储器(英文：static random-access memory，缩写：SRAM)，双倍数据率同步动态随机存取存储器(英文：Double Data Rate Synchronous Dynamic Random Access Memory，缩写：DDR SDRAM)等；存储器也可以包括非易失性存储器(英文：non-volatile memory)，例如快闪存储器(英文：flash memory)。存储器42用于存储计算机程序(如实现上述方法的应用程序、功能模块等)、计算机指令等，上述的计算机程序、计算机指令等可以分区存储在一个或多个存储器42中。并且上述的计算机程序、计算机指令、数据等可以被处理器41调用。

上述的计算机程序、计算机指令等可以分区存储在一个或多个存储器42中。并且上述的计算机程序、计算机指令、数据等可以被处理器41调用。

处理器41，用于执行存储器42存储的计算机程序，以实现上述实施例涉及的方法中的各个步骤。

具体可以参见前面方法实施例中的相关描述。

处理器41和存储器42可以是独立结构，也可以是集成在一起的集成结构。当处理器41和存储器42是独立结构时，存储器42、处理器41可以通过总线43耦合连接。

本实施例的服务器可以执行图2所示方法中的技术方案，其具体实现过程和技术原理参见图2所示方法中的相关描述，此处不再赘述。

此外，本申请实施例还提供一种计算机可读存储介质，计算机可读存储介质中存储有计算机执行指令，当用户设备的至少一个处理器执行该计算机执行指令时，用户设备执行上述各种可能的方法。

其中，计算机可读介质包括计算机存储介质和通信介质，其中通信介质包括便于从一个地方向另一个地方传送计算机程序的任何介质。存储介质可以是通用或专用计算机能够存取的任何可用介质。一种示例性的存储介质耦合至处理器，从而使处理器能够从该存储介质读取信息，且可向该存储介质写入信息。当然，存储介质也可以是处理器的组成部分。处理器和存储介质可以位于ASIC中。另外，该ASIC可以位于用户设备中。当然，处理器和存储介质也可以作为分立组件存在于通信设备中。

本申请还提供一种程序产品，程序产品包括计算机程序，计算机程序存储在可读存储介质中，服务器的至少一个处理器可以从可读存储介质读取计算机程序，至少一个处理器执行计算机程序使得服务器实施上述本发明实施例任一的方法。

本领域普通技术人员可以理解：实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可读取存储介质中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或对其中部分或全部技术特征进行等同替换；而这些修改或替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims (10)

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

通过子控件监听针对页面的滑动事件；

若监听到滑动事件，则生成滑动指令，并判断父控件的显示区是否滑到边界；

若所述父控件的显示区滑到边界，则控制所述子控件的显示区根据所述滑动指令按照预设方向滑动显示；

若所述父控件的显示区未滑到边界，则控制所述父控件的显示区根据所述滑动指令按照预设方向滑动显示；

在通过子控件监听针对页面的滑动事件之前，还包括：

在子控件中新增用于通知原生组件的标记属性；

在ReactNative框架初始化过程中，根据所述标记属性查找所述子控件对应的父控件。

2.根据权利要求1所述的方法，其特征在于，在控制所述父控件的显示区根据所述滑动指令按照预设方向滑动显示之后，还包括：

判断所述父控件的显示区是否滑动到边界；

若所述父控件的显示区滑动到边界，则触发所述子控件的滑动函数；

根据所述子控件的滑动函数，控制所述子控件的显示区按照预设方向滑动显示。

3.根据权利要求1所述的方法，其特征在于，在控制所述子控件的显示区根据所述滑动指令按照预设方向滑动显示之后，还包括：

判断所述子控件的显示区是否滑动到边界；

若所述子控件的显示区滑动到边界，则触发所述父控件的滑动函数；

根据所述父控件的滑动函数，控制所述父控件的显示区按照预设方向滑动显示。

4.根据权利要求1-3中任一项所述的方法，其特征在于，通过子控件监听针对页面的滑动事件，包括：

响应针对页面的触控信号；

获取所述触控信号在页面上的位移，若位移大于预设阈值，则生成滑动事件。

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

监听模块，用于通过子控件监听针对页面的滑动事件；

判断模块，用于在监听到滑动事件时，生成滑动指令，并判断父控件的显示区是否滑到边界；

控制模块，用于在所述父控件的显示区滑到边界时，控制所述子控件的显示区根据所述滑动指令按照预设方向滑动显示；以及在所述父控件的显示区未滑到边界时，控制所述父控件的显示区根据所述滑动指令按照预设方向滑动显示；

设置模块，用于在子控件中新增用于通知原生组件的标记属性；

在ReactNative框架初始化过程中，根据所述标记属性查找所述子控件对应的父控件。

6.根据权利要求5所述的装置，其特征在于，控制模块，还用于：

判断所述父控件的显示区是否滑动到边界；

若所述父控件的显示区滑动到边界，则触发所述子控件的滑动函数；

根据所述子控件的滑动函数，控制所述子控件的显示区按照预设方向滑动显示。

7.根据权利要求5所述的装置，其特征在于，控制模块，还用于：

判断所述子控件的显示区是否滑动到边界；

若所述子控件的显示区滑动到边界，则触发所述父控件的滑动函数；

根据所述父控件的滑动函数，控制所述父控件的显示区按照预设方向滑动显示。

8.根据权利要求5-7中任一项所述的装置，其特征在于，所述监听模块，具体用于：

响应针对页面的触控信号；

获取所述触控信号在页面上的位移，若位移大于预设阈值，则生成滑动事件。

9.一种页面展示设备，其特征在于，包括：存储器、处理器，存储器中存储有所述处理器的可执行指令；其中，所述处理器配置为经由执行所述可执行指令来执行权利要求1-4中任一项所述的页面展示方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1-4中任一项所述的页面展示方法。

Images