一种功能组件的显示控制方法、装置、介质及设备

文档序号:1921031 发布日期:2021-12-03 浏览:11次 >En<

阅读说明:本技术 一种功能组件的显示控制方法、装置、介质及设备 (Display control method, device, medium and equipment for functional component ) 是由 王树军 王东升 于 2021-08-30 设计创作,主要内容包括:本申请涉及计算机以及人工智能技术领域,本实施例公开了一种功能组件的显示控制方法、装置、介质及设备。该方法包括:通过页面中的内容显示区域显示预先设定的待显示内容;其中,内容显示区域为页面的区域中的子区域;若监听到页面中的功能组件显示触发操作,则确定触发操作的目标内容显示区域;在主程序接收到内容显示区域对自定义全局指令的调用请求时,根据自定义全局指令确定功能组件在内容显示区域中的显示控制指令;根据功能组件的显示控制指令控制功能组件显示。本技术方案,可以根据预先确定的监听对象对功能组件进行显示,在不影响页面美观性的同时,还能够确保功能的齐整,提高用户对前端页面使用的直观感受。(The application relates to the technical field of computers and artificial intelligence, and the embodiment discloses a display control method, device, medium and equipment of a functional component. The method comprises the following steps: displaying preset contents to be displayed through a content display area in a page; the content display area is a sub-area in the area of the page; if the functional components in the page are monitored to display the trigger operation, determining a target content display area of the trigger operation; when the main program receives a call request of the content display area to the user-defined global instruction, determining a display control instruction of the functional component in the content display area according to the user-defined global instruction; and controlling the display of the functional component according to the display control instruction of the functional component. According to the technical scheme, the functional components can be displayed according to the predetermined monitoring object, the attractiveness of the page is not influenced, the neatness of the function can be ensured, and the visual feeling of a user on the use of the front page is improved.)

一种功能组件的显示控制方法、装置、介质及设备

技术领域

本申请实施例涉及计算机技术领域,尤其涉及一种功能组件的显示控制方法、装置、介质及设备。

背景技术

随着信息化时代的迅速发展,通过各种各样页面进行内容展示,以传递信息给用户是较为通用的信息传递手段。但是,在以往的页面内容展示的过程中,由于内容相对单一,且没有嵌套关系的运用,所以当出现需要嵌套显示的信息时,需要针对页面的代码进行重新编辑。例如在一段文字中需要展示一张表格,这种情况下,可以通过重新编辑页面代码来实现。但是,还有一些情况下,当需要展示的表格的篇幅较大,在页面中无法直接将表格的全部内容进行展示时,就会出现嵌套在文字中的表格只能部分显示,并通过显示滚动条来供用户进行滚动展示的目的。而这种显示方式滚动条自身的存在会占用表格显示区域内的一部分空间,同时还影响页面内容展示的美观。

发明内容

本申请实施例提供一种功能组件的显示控制方法、装置、介质及设备,可以根据预先确定的监听对象,当用户存在一定操作之后,对功能组件进行显示,在不影响页面美观性的同时,还能够确保功能的齐整,提高用户对前端页面使用的直观感受。

第一方面,本申请实施例提供了一种功能组件的显示控制方法,所述方法包括:

通过页面中的内容显示区域显示预先设定的待显示内容;其中,所述页面中的内容显示区域的数量为至少一个,所述内容显示区域为所述页面的区域中的子区域;

若监听到所述页面中的功能组件显示触发操作,则确定所述触发操作的目标内容显示区域;其中,至少一个内容显示区域与自定义全局指令具有关联关系;

在主程序接收到内容显示区域对自定义全局指令的调用请求时,根据所述自定义全局指令确定所述功能组件在所述内容显示区域中的显示控制指令;

根据所述功能组件的显示控制指令控制功能组件显示。

进一步的,识别是否监听到所述页面中的功能组件显示触发操作,包括:

若检测到待显示内容的滚动显示事件,且所述待显示内容在与所述滚动显示事件包括的方向信息的对应方向存在滚动显示部分,则确定监听到功能组件显示触发操作;

若检测到待显示内容的滚动显示事件,且所述待显示内容在与所述滚动显示事件包括的方向信息的对应方向不存在滚动显示部分,则确定未监听到功能组件显示触发操作;

其中,若所述待显示内容的大小超过所述内容显示区域的窗口大小,则按照预设规则显示所述待显示内容的初始显示部分,并隐藏所述待显示内容的滚动显示部分。

进一步的,在确定监听到功能组件显示触发操作之后,所述方法还包括:

确定所述滚动显示部分与所述初始显示部分的相对方向和相对大小;

根据所述相对方向和相对大小,确定所述功能组件的显示参数;

根据所述功能组件的显示控制指令控制功能组件显示,包括:

根据所述功能组件的显示控制指令,提取所述功能组件的显示参数,以控制所述功能组件进行显示。

进一步的,所述待显示内容的滚动显示事件包括:

检测到光标停留在内容显示区域,且检测到鼠标滚轮滚动的事件,或者,存在鼠标的拖拽事件;

或,

若检测到触点位置在内容显示区域内,且存在触点持续按压移动的拖动事件。

进一步的,在根据所述功能组件的显示控制指令控制功能组件显示之后,所述方法还包括:

若内容显示区域预先关联的自定义全局指令监听到功能组件显示触发操作消失,则根据所述自定义全局指令确定功能组件的隐藏控制指令,以取消对所述功能组件的显示。

进一步的,所述页面中的内容显示区域为在用户界面的渐进式框架下的自定义内容显示区域;

所述自定义内容显示区域的样式采用预先确定的默认显示样式;其中,所述默认显示样式包括自定义内容显示区域的窗口长度、宽度、在页面中的位置以及背景颜色中的至少一种。

进一步的,所述功能组件包括滚动条;

根据所述功能组件的显示控制指令控制功能组件显示,包括:

根据所述功能组件的显示控制指令控制滚动条在所述内容显示区域的右侧边或者下侧边进行显示。

第二方面,本申请实施例提供了一种功能组件的显示控制装置,该装置包括:

内容显示模块,用于通过页面中的内容显示区域显示预先设定的待显示内容;其中,所述页面中的内容显示区域的数量为至少一个,所述内容显示区域为所述页面的区域中的子区域;

目标内容显示区域确定模块,用于若监听到所述页面中的功能组件显示触发操作,则确定所述触发操作的目标内容显示区域;其中,至少一个内容显示区域与自定义全局指令具有关联关系;

显示控制指令确定模块,用于在主程序接收到内容显示区域对自定义全局指令的调用请求时,根据所述自定义全局指令确定所述功能组件在所述内容显示区域中的显示控制指令;

功能组件显示模块,用于根据所述功能组件的显示控制指令控制功能组件显示。

进一步的,所述目标内容显示区域确定模块,具体用于:

若检测到待显示内容的滚动显示事件,且所述待显示内容在与所述滚动显示事件包括的方向信息的对应方向存在滚动显示部分,则确定监听到功能组件显示触发操作;

若检测到待显示内容的滚动显示事件,且所述待显示内容在与所述滚动显示事件包括的方向信息的对应方向不存在滚动显示部分,则确定未监听到功能组件显示触发操作;

其中,若所述待显示内容的大小超过所述内容显示区域的窗口大小,则按照预设规则显示所述待显示内容的初始显示部分,并隐藏所述待显示内容的滚动显示部分。

进一步的,所述目标内容显示区域确定模块,还用于:

确定所述滚动显示部分与所述初始显示部分的相对方向和相对大小;

根据所述相对方向和相对大小,确定所述功能组件的显示参数;

所述功能组件显示模块,具体用于:

根据所述功能组件的显示控制指令,提取所述功能组件的显示参数,以控制所述功能组件进行显示。

进一步的,所述待显示内容的滚动显示事件包括:

检测到光标停留在内容显示区域,且检测到鼠标滚轮滚动的事件,或者,存在鼠标的拖拽事件;

或,

若检测到触点位置在内容显示区域内,且存在触点持续按压移动的拖动事件。

进一步的,所述装置还包括:

功能组件取消显示模块,用于若内容显示区域预先关联的自定义全局指令监听到功能组件显示触发操作消失,则根据所述自定义全局指令确定功能组件的隐藏控制指令,以取消对所述功能组件的显示。

进一步的,所述页面中的内容显示区域为在用户界面的渐进式框架下的自定义内容显示区域;

所述自定义内容显示区域的样式采用预先确定的默认显示样式;其中,所述默认显示样式包括自定义内容显示区域的窗口长度、宽度、在页面中的位置以及背景颜色中的至少一种。

进一步的,所述功能组件包括滚动条;

功能组件显示模块,具体用于:

根据所述功能组件的显示控制指令控制滚动条在所述内容显示区域的右侧边或者下侧边进行显示。

第三方面,本申请实施例提供了一种计算机可读存储介质,其上存储有计算机程序,该程序被处理器执行时实现如本申请实施例所述的功能组件的显示控制方法。

第四方面,本申请实施例提供了一种电子设备,包括存储器,处理器及存储在存储器上并可在处理器运行的计算机程序,所述处理器执行所述计算机程序时实现如本申请实施例所述的功能组件的显示控制方法。

本申请实施例所提供的技术方案,通过页面中的内容显示区域显示预先设定的待显示内容;其中,所述页面中的内容显示区域的数量为至少一个,所述内容显示区域为所述页面的区域中的子区域;若监听到所述页面中的功能组件显示触发操作,则确定所述触发操作的目标内容显示区域;其中,至少一个内容显示区域与自定义全局指令具有关联关系;在主程序接收到内容显示区域对自定义全局指令的调用请求时,根据所述自定义全局指令确定所述功能组件在所述内容显示区域中的显示控制指令;根据所述功能组件的显示控制指令控制功能组件显示。本方案通过对于功能组件显示触发操作的监听,可以确定当前场景下是否需要显示功能组件,只有在需要显示时,才将功能组件显示出来。这样既能够避免功能组件持续显示对页面空间的占用,同时还能够确保功能组件的对于相应功能提供,提高用户在使用过程的页面内容是否完全展示的感知。

附图说明

图1是本申请实施例一提供的功能组件的显示控制方法的流程图;

图2为本发明实施例二提供的功能组件的显示控制方法的流程图;

图3为本发明实施例三提供的一种功能组件的显示控制装置的结构框图;

图4是本申请实施例五提供的一种电子设备的结构示意图。

具体实施方式

下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是,此处所描述的具体实施例仅仅用于解释本申请,而非对本申请的限定。另外还需要说明的是,为了便于描述,附图中仅示出了与本申请相关的部分而非全部结构。

在更加详细地讨论示例性实施例之前应当提到的是,一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将各步骤描述成顺序的处理,但是其中的许多步骤可以被并行地、并发地或者同时实施。此外,各步骤的顺序可以被重新安排。当其操作完成时所述处理可以被终止,但是还可以具有未包括在附图中的附加步骤。所述处理可以对应于方法、函数、规程、子例程、子程序等等。

实施例一

图1是本申请实施例一提供的功能组件的显示控制方法的流程图,本实施例可适用于页面内容编辑与显示的场景,该方法可以由本申请实施例所提供的功能组件的显示控制装置执行,该装置可以由软件和/或硬件的方式来实现,并可集成于智能终端等前端电子设备中。

如图1所示,所述功能组件的显示控制方法包括:

S110,通过页面中的内容显示区域显示预先设定的待显示内容;其中,所述页面中的内容显示区域的数量为至少一个,所述内容显示区域为所述页面的区域中的子区域。

其中,待显示内容可以是在Web页面或者其他页面中,进行单独插入的信息,例如,财报、物资报表以及其他统计性质的报表等,或者是图片、图形等。内容显示区域可以是自定义的具有独立属性信息的区域,例如在一个页面中可以分别布置多个内容显示区域,每个内容显示区域可以有自己需要显示的数据,且各个内容显示区域之间可以根据页面显示的需求进行位置调整。例如每个内容显示区域可以看作一个容器,分别具有各自的属性,这样可以在一个页面中,实现信息的区块化显示。

可以理解的,需要在一个页面中显示信息,可以先确定显示信息的位置,例如打开网页时候,显示文字的区域和显示图片的区域,是相对固定的。本方案中对内容的显示也是一样的,需要明确内容显示区域。本方案中,内容显示区域可以是一个矩形区域,还可以是圆形区域或者其他形状的区域,具体可以根据需求来进行设定。其中,内容显示区域可以通过代码来进行自定义div区域,并为其设置默认的样式,其中默认的样式设置,可以通过设定的属性参数赋值来实现,还可以通过设置默认的css文件来实现。

S120,若监听到所述页面中的功能组件显示触发操作,则确定所述触发操作的目标内容显示区域;其中,至少一个内容显示区域与自定义全局指令具有关联关系。

其中,监听动作的执行主体可以是主程序,主程序可以是当前页面显示的程序,例如浏览器、网购客户端以及聊天客户端等等。具体的,主程序可以通过自定义指令来完成监听的。

功能组件显示触发操作,可以是通过预先定义来确定的,例如功能显示组件为滚动条,则触发操作可以是用户发出的需要进行滚动显示的操作,例如用户滚动鼠标的滚轮,拖动某一个内容显示区域进行横向移动等等。

本方案中,如果监听到,则可以根据触发操作发生时鼠标光标的位置,或者用户手指触控的位置,确定是对页面中的哪一个内容显示区域进行触发的操作,从而确定所述触发操作的目标内容显示区域。

本方案中,具体的,所述待显示内容的滚动显示事件包括:

检测到光标停留在内容显示区域,且检测到鼠标滚轮滚动的事件,或者,存在鼠标的拖拽事件;

或,

若检测到触点位置在内容显示区域内,且存在触点持续按压移动的拖动事件。

其中,由于内容显示区域内,如果用户在观看页面的过程中采用了滚轮滚动,或者拖拽,或者通过持续按压移动来实现触控的拖动,就可以确定为存在待显示内容的滚动显示事件。在这种情况下,可以为用户显示滚动条的功能组件,以达到唤起功能组件的目的,从而为用户的后续操作提供便利。

S130,在主程序接收到内容显示区域对自定义全局指令的调用请求时,根据所述自定义全局指令确定所述功能组件在所述内容显示区域中的显示控制指令。

本方案中,自定义全局指令可以是全局定义的指令,也就是可以在主程序运行过程中直接调用的指令,采用全局指令的好处是不需要对每一个内容显示区域都单独去编辑相应的代码,从而可以在代码编辑过程中得到简化。

同时,主程序接收到内容显示区域对自定义全局指令的调用请求时,根据所述自定义全局指令确定所述功能组件在所述内容显示区域中的显示控制指令。例如,监听到滚动操作,则显示控制指令可以是显示滚动条,监听到滚动后预设时长没有任何操作,则显示控制指令可以是取消对滚动条的显示。

S140,根据所述功能组件的显示控制指令控制功能组件显示。

本方案中,可以将确定的功能组件的显示控制指令下发至目标内容显示区域,供目标内容显示区域根据接收到的显示控制指令确定是否需要显示功能组件。

本方案中,功能组件可以不仅限于滚动条,还可以是图片的缩放组件,字体的编辑组件等等。通过对功能组件的隐藏,并且在监听到相应显示触发操作之后唤起,可以简化页面显示的信息,同时还能够不丢失功能组件的功能。这样设置可以在信息的显示上极大的提高用户的使用体验。

另一方面,本方案采用的是通过自定义全局指令来进行监听和功能组件显示的,这就在代码编辑过程中可以无需对每一个内容显示区域都进行功能组件的监听和显示逻辑的编辑,可以极大的降低代码重复程度,提高开发和后期的运维效率。

本申请实施例所提供的技术方案,通过页面中的内容显示区域显示预先设定的待显示内容;其中,所述页面中的内容显示区域的数量为至少一个,所述内容显示区域为所述页面的区域中的子区域;若监听到所述页面中的功能组件显示触发操作,则确定所述触发操作的目标内容显示区域;其中,至少一个内容显示区域与自定义全局指令具有关联关系;在主程序接收到内容显示区域对自定义全局指令的调用请求时,根据所述自定义全局指令确定所述功能组件在所述内容显示区域中的显示控制指令;根据所述功能组件的显示控制指令控制功能组件显示。执行本方案,可以根据预先确定的监听对象,当用户存在一定操作之后,对功能组件进行显示,在不影响页面美观性的同时,还能够确保功能的齐整,提高用户对前端页面使用的直观感受。

在本实施例中,可选的,识别是否监听到所述页面中的功能组件显示触发操作,包括:

若检测到待显示内容的滚动显示事件,且所述待显示内容在与所述滚动显示事件包括的方向信息的对应方向存在滚动显示部分,则确定监听到功能组件显示触发操作;

若检测到待显示内容的滚动显示事件,且所述待显示内容在与所述滚动显示事件包括的方向信息的对应方向不存在滚动显示部分,则确定未监听到功能组件显示触发操作;

其中,若所述待显示内容的大小超过所述内容显示区域的窗口大小,则按照预设规则显示所述待显示内容的初始显示部分,并隐藏所述待显示内容的滚动显示部分。

其中,待显示内容的大小超过内容显示区域的窗口大小时,无法将待显示内容的所有内容都在内容显示区域中显示出来,则此时需要进行划分,划分出初始显示部分和滚动显示部分。例如,内容显示区域的窗口大小为a*b,待显示内容的大小为c*d,如果a<c,b<d,则只能够将待显示内容的左上方宽度为a,高度为b的范围显示出来,则这一部分就是初始显示部分,其余部分均为滚动显示部分。

滚动显示事件包括的方向信息可以理解为滚动方向或者拖拽方向。在检测到待显示内容的滚动显示事件之后,且滚动方向不存在滚动显示部分,则确定未监听到功能组件显示触发操作。只有在滚动方向存在滚动显示部分时,则确定监听到功能组件显示触发操作。如内容显示区域的窗口大小为a*b,待显示内容的大小为c*b,则在纵向高度上无需隐藏,只有横向高度上会存在滚动显示部分,因此只有拖拽方向或者滚动方向为向下时,才回确定监听到功能组件显示触发操作,并显示滚动条的功能组件。本方案这样设置,可以根据显示的初始显示部分和滚动显示部分的位置关系,以及滚动操作的方向信息一致的情况下,才显示滚动条的功能组件。

本方案中,具体的,在确定监听到功能组件显示触发操作之后,所述方法还包括:

确定所述滚动显示部分与所述初始显示部分的相对方向和相对大小;

根据所述相对方向和相对大小,确定所述功能组件的显示参数;

根据所述功能组件的显示控制指令控制功能组件显示,包括:

根据所述功能组件的显示控制指令,提取所述功能组件的显示参数,以控制所述功能组件进行显示。

其中,如果需要显示的目标内容的实际区域大于内容显示区域时,则会出现通过内容显示区域无法一次性将目标内容的所有区域都显示出来,则可以根据内容显示区域的大小,确定优先显示目标内容的部分内容,即初始显示部分的内容。可以理解的,以举行为例,初始显示部分可以是目标内容的左上方与内容显示区域的左上方重合,得到的左上方的部分区域。

得到默认区域的显示结果之后,可以在页面中进行目标内容的显示,但是由于显示结果不够全面,因此可以在用户观看的过程中设置滚动条。而常规的滚动条设置需要在内容显示区域内部的右侧或者下侧边界位置一直显示,这就造成显示条对目标内容的遮挡,或者显示条自身占据内容显示区域的部分区域,影响内容显示区域的大小等问题。同时,对于页面展示来说,显示条一直显示在页面中会影响页面的整体效果,导致页面的美观程度受损。因此,本方案采用可以对目标内容的滚动显示事件进行监听的方案,也就是当监听到目标内容被滚动时,则显示滚动条,而当目标内容滚动结束时,则隐藏滚动条。这样设置,可以灵活的对滚动条进行控制,可以在满足用户观看需求的同时,简化页面显示的内容,同时不影响对正常的功能的使用。

本方案中,由于目标内容的初始显示部分和滚动显示部分的相对位置可能是上下位置关系,还可能是其他位置关系。因此,需要将滚动条的显示位置和控制目标内容移动的方式根据滚动显示部分与初始显示部分的相对位置关系进行关联。例如滚动显示部分在初始显示部分的下方,则可以在内容显示区域的右侧显示可以上下移动的滚动条,而滚动显示部分在初始显示部分的右侧,则可以在内容显示区域的下侧显示可以左右移动的滚动条。

本方案中,可以是按照初始显示部分和滚动显示部分的大小比例,来确定滚动条的长短,这样可以提示用户还有多少没有被内容显示区域显示出来,以及告知用户已经到达目标内容的最下方或者最右方。

实施例二

图2为本发明实施例二提供的功能组件的显示控制方法的流程图,本实施例以上述实施例为基础进行优化。具体优化为:在根据所述功能组件的显示控制指令控制功能组件显示之后,所述方法还包括:若内容显示区域预先关联的自定义全局指令监听到功能组件显示触发操作消失,则根据所述自定义全局指令确定功能组件的隐藏控制指令,以取消对所述功能组件的显示。

如图2所示,本实施例的方法具体包括如下步骤:

S210,通过页面中的内容显示区域显示预先设定的待显示内容;其中,所述页面中的内容显示区域的数量为至少一个,所述内容显示区域为所述页面的区域中的子区域。

其中,可以是在用户界面的渐进式框架下提供directive指令,创建全局自定义指令,使用Vue.directive接口实现。首先需要自定义一个内容显示区域,可以创建一个需要实现的自定义网页排版容器,并且为该容器设置默认的样式。其中,用户界面的渐进式框架可以是Vue框架,也可以是相对基础一些的Javascript框架,本方案的适用范围也不限于对Javascript框架的其他延伸。

S220,若监听到所述页面中的功能组件显示触发操作,则确定所述触发操作的目标内容显示区域;其中,至少一个内容显示区域与自定义全局指令具有关联关系。

在得到内容显示区域之后,可以设置监听滚动事件的算法。本方案中,可以将监听方法以scroll.js自定义指令类来实现,并且可以通过将其作为全局的指令类。也就是在任意页面的任意一个容器中,都可以调用该js指令,来实现对页面中的内容显示区域内是否存在滚动事件进行监听。此处具体的可以使用钩子函数来实现。

本方案中,scroll.js中还可以定义了监听到时显示,监听不到或者监听滚动操作事件结束时隐藏,通过这样的设置,可以提高代码的复用性,无需工作人员在每一处需要实现的位置都编辑类似的代码内容,便于功能的实现过程的简化,同时降低了后期维护的难度。

S230,在主程序接收到内容显示区域对自定义全局指令的调用请求时,根据所述自定义全局指令确定所述功能组件在所述内容显示区域中的显示控制指令。

本方案中,具体的,所述页面中的内容显示区域为在用户界面的渐进式框架下的自定义内容显示区域;

所述自定义内容显示区域的样式采用预先确定的默认显示样式;其中,所述默认显示样式包括自定义内容显示区域的窗口长度、宽度、在页面中的位置以及背景颜色中的至少一种。

本方案通过这样的设计,可以使得页面的设计更加灵活,并且同时可以支持内容显示区域的相互嵌套的情况,如果存在相互嵌套的情况,只要子视图的范围在父视图以内即可。

本方案中,可选的,对于所述滚动显示事件的检测过程,包括:

调用预先定义的指令类方法,所述指令类方法采用js语句实现。

本方案通过在main.js中添加对scroll的自定义指令的全局引用,可以提高代码的复用,无需工作人员针对同一功能或者类似功能来分别编写代码,使程序实现过程更加简洁,代码更加轻量化。

本实施例中,所述js语句是基于钩子函数进行调用的,其中,钩子函数可以设置在任意可以放钩子的位置。本方案具体可以””定义show-scroll实现滚动条的显示,并且可以将滚动条的颜色信息设置为与背景相同,来将滚动条隐藏。

可以将这一代码语句添加至应用程序的代码的任意需要使用的位置。本方案通过这样的设计,可以简化滚动条控制的实现过程。

S240,根据所述功能组件的显示控制指令控制功能组件显示。

其中,本方案只需要监听滚动事件,在滚动的时候显示滚动条即在div上加上show-scroll的样式即可。要做到滚动时添加上show-scroll样式,在停止滚动时去掉show-scroll的样式。

本方案使用Vue指令技术点全局实现此功能,做到代码高复用性,一处实现,多处使用的效果。

创建自定义指令类scroll.js代码,并通过const scrollHandler确定触发滚动事件,并在开始滑动时候更改样式添加show-scroll样式,使显示滚动条,另外添加if语句,在结束滚动后去掉样式show-scroll恢复默认样式即隐藏掉滚动条。其中自定义指令的钩子函数const scroll以对el的dom对象添加监听事件,实现在main.js中添加对scroll的自定义指令的全局引用。并利用Vue.use(scroll)将实现的指令scroll应用到具体的div中。

S250,若内容显示区域预先关联的自定义全局指令监听到功能组件显示触发操作消失,则根据所述自定义全局指令确定功能组件的隐藏控制指令,以取消对所述功能组件的显示。

现有技术中,原生实现滚动时显示,停止滚动时隐藏的功能是通过mac系统偏好设置中实现,在Windows系统的显示设置中对此功能进行设置,其内部实现原理iOS或Windows都未找到具体阐述或说明。其缺陷就是不能在开发自定义的DOM元素区域实现此功能。

本方案首先实现了页面或具体的div区域滚动时显示滚动条,停止时隐藏滚动条,提升了产品的用户体验。其次使用指令对元素div的滚动条进行控制,可有效提升代码复用率,减小了构建包体积,无需在需要实现此功能的每个页面去都去写一次代码实现,做到了一次实现,随处可用。

本申请实施例所提供的技术方案,通过对用户的操作进行监听,并且能够针对操作对象进行滚动条的显示和取消显示的处理,可以提高用户的使用体验。同时后端实现是基于全局指令实现,可以避免代码的重复编辑,简单且高效。

在上述各实施例的基础上,可选的,所述功能组件包括滚动条;

根据所述功能组件的显示控制指令控制功能组件显示,包括:

根据所述功能组件的显示控制指令控制滚动条在所述内容显示区域的右侧边或者下侧边进行显示。

可以理解的,可以是在初始显示部分和滚动显示部分位置是上下关系,且用户的滚动操作是向下时,或者拖拽操作是向上时,显示上下滚动的滚动条,并且可以在右侧边进行显示。同理的,可以是在初始显示部分和滚动显示部分位置是左右关系,且用户的滚动操作是向右时,或者拖拽操作是向左时,显示左右滚动的滚动条,并且可以在下侧边进行显示。

在一个可行的实施例中,可以通过预先训练的机器学习模型对用户是否发出功显示内容的滚动显示事件进行识别或者预测。

具体的,可以对积累大量的用户操作数据,对用户发生显示内容的滚动显示事件至前的一段时间长度内的操作日志进行提取,并作为训练样本,即正样本。并且可以对用户未发生显示内容的滚动显示事件的操作日志作为负样本,并且可以划分训练集和测试集,从而可以进行机器学习模型的训练,机器模型的训练结果在于可以基于操作日志中前一部分的数据来预测用户是否会触发显示内容的滚动显示事件。由此,可以进行快速的、准确的操作信息识别,避免由于用户误触触发,或者避免用户真实意图是触发,但是没有被识别到操作信息而影响用户的前端使用体验。

可以理解的,其中训练的机器学习模型可以是分类器,得到的是两种预测结果,并在用户实际观看过程中采集操作日志和进行分析,如果预测为会触发,则可以通过分类器输出“会触发”的结果。并且根据这一结果对功能组件进行预加载,在识别到用户滚动操作后,直接显示即可,这样设置可以有效的提高显示内容的滚动显示事件的识别速度,提高页面前端响应的敏捷度,有助于让用户更加无延迟的感知到页面对于功能组件的服务的提供。

除此之外,本方案中,还可以对功能组件显示位置和显示形式进行自定义控制,例如功能组件可以显示在内容显示区域的右侧边或者下侧边,除此之外,还可以跟随用户的手指点击位置或者跟随光标的停留位置,以及功能组件的现实形态可以支持用户的手动调节,例如调节透明度、形状以及宽度等。对于功能组件的显示位置以及显示形态,可以根据用户的身份信息进行关联,例如对于年龄在20岁及以下的用户,更注重轻量化和灵活性,对于20岁以上的用户,更注重功能组件的实用性,则可以通过训练显示构建模型来进行识别和控制。但是,当随着用户性别、地域以及职业等限制条件的增多,单一维度的识别方式很难满足用户的需求,因此,可以通过采集更多的样本,训练显示构建模型来对功能组件进行显示控制,提高用户的使用体验。具体的,样本中不仅可以包括用户的信息,还可以包括用户对功能组件的显示位置或者显示形态进行修改的信息,从而可以在训练后完成对显示构建模型的不断更新,以提供个性化的功能组件显示。

实施例三

图3为本发明实施例三提供的一种功能组件的显示控制装置的结构框图,该装置可执行本发明任意实施例所提供的功能组件的显示控制方法,具备执行方法相应的功能模块和有益效果。如图3所示,该装置可以包括:

内容显示模块310,用于通过页面中的内容显示区域显示预先设定的待显示内容;其中,所述页面中的内容显示区域的数量为至少一个,所述内容显示区域为所述页面的区域中的子区域;

目标内容显示区域确定模块320,用于若监听到所述页面中的功能组件显示触发操作,则确定所述触发操作的目标内容显示区域;其中,至少一个内容显示区域与自定义全局指令具有关联关系;

显示控制指令确定模块330,用于在主程序接收到内容显示区域对自定义全局指令的调用请求时,根据所述自定义全局指令确定所述功能组件在所述内容显示区域中的显示控制指令;

功能组件显示模块340,用于根据所述功能组件的显示控制指令控制功能组件显示。

进一步的,所述目标内容显示区域确定模块,具体用于:

若检测到待显示内容的滚动显示事件,且所述待显示内容在与所述滚动显示事件包括的方向信息的对应方向存在滚动显示部分,则确定监听到功能组件显示触发操作;

若检测到待显示内容的滚动显示事件,且所述待显示内容在与所述滚动显示事件包括的方向信息的对应方向不存在滚动显示部分,则确定未监听到功能组件显示触发操作;

其中,若所述待显示内容的大小超过所述内容显示区域的窗口大小,则按照预设规则显示所述待显示内容的初始显示部分,并隐藏所述待显示内容的滚动显示部分。

进一步的,所述目标内容显示区域确定模块,还用于:

确定所述滚动显示部分与所述初始显示部分的相对方向和相对大小;

根据所述相对方向和相对大小,确定所述功能组件的显示参数;

所述功能组件显示模块,具体用于:

根据所述功能组件的显示控制指令,提取所述功能组件的显示参数,以控制所述功能组件进行显示。

进一步的,所述待显示内容的滚动显示事件包括:

检测到光标停留在内容显示区域,且检测到鼠标滚轮滚动的事件,或者,存在鼠标的拖拽事件;

或,

若检测到触点位置在内容显示区域内,且存在触点持续按压移动的拖动事件。

进一步的,所述装置还包括:

功能组件取消显示模块,用于若内容显示区域预先关联的自定义全局指令监听到功能组件显示触发操作消失,则根据所述自定义全局指令确定功能组件的隐藏控制指令,以取消对所述功能组件的显示。

进一步的,所述页面中的内容显示区域为在用户界面的渐进式框架下的自定义内容显示区域;

所述自定义内容显示区域的样式采用预先确定的默认显示样式;其中,所述默认显示样式包括自定义内容显示区域的窗口长度、宽度、在页面中的位置以及背景颜色中的至少一种。

进一步的,所述功能组件包括滚动条;

功能组件显示模块,具体用于:

根据所述功能组件的显示控制指令控制滚动条在所述内容显示区域的右侧边或者下侧边进行显示。

上述产品可执行本申请实施例所提供的功能组件的显示控制方法,具备执行方法相应的功能模块和有益效果。

实施例四

本发明实施例四提供了一种计算机可读存储介质,其上存储有计算机程序,该程序被处理器执行时实现如本申请所有发明实施例提供的功能组件的显示控制方法:

通过页面中的内容显示区域显示预先设定的待显示内容;其中,所述页面中的内容显示区域的数量为至少一个,所述内容显示区域为所述页面的区域中的子区域;

若监听到所述页面中的功能组件显示触发操作,则确定所述触发操作的目标内容显示区域;其中,至少一个内容显示区域与自定义全局指令具有关联关系;

在主程序接收到内容显示区域对自定义全局指令的调用请求时,根据所述自定义全局指令确定所述功能组件在所述内容显示区域中的显示控制指令;

根据所述功能组件的显示控制指令控制功能组件显示。

可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括——但不限于——电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括——但不限于——无线、电线、光缆、RF等等,或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码,所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++,还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中,远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机,或者,可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

实施例五

本申请实施例五提供了一种电子设备。图4是本申请实施例五提供的一种电子设备的结构示意图。如图4所示,本实施例提供了一种电子设备400,其包括:一个或多个处理器420;存储装置410,用于存储一个或多个程序,当所述一个或多个程序被所述一个或多个处理器420执行,使得所述一个或多个处理器420实现本申请实施例所提供的功能组件的显示控制方法,该方法包括:

通过页面中的内容显示区域显示预先设定的待显示内容;其中,所述页面中的内容显示区域的数量为至少一个,所述内容显示区域为所述页面的区域中的子区域;

若监听到所述页面中的功能组件显示触发操作,则确定所述触发操作的目标内容显示区域;其中,至少一个内容显示区域与自定义全局指令具有关联关系;

在主程序接收到内容显示区域对自定义全局指令的调用请求时,根据所述自定义全局指令确定所述功能组件在所述内容显示区域中的显示控制指令;

根据所述功能组件的显示控制指令控制功能组件显示。

当然,本领域技术人员可以理解,处理器420还实现本申请任意实施例所提供的功能组件的显示控制方法的技术方案。

图4显示的电子设备400仅仅是一个示例,不应对本申请实施例的功能和使用范围带来任何限制。

如图4所示,该电子设备400包括处理器420、存储装置410、输入装置430和输出装置440;电子设备中处理器420的数量可以是一个或多个,图4中以一个处理器420为例;电子设备中的处理器420、存储装置410、输入装置430和输出装置440可以通过总线或其他方式连接,图4中以通过总线450连接为例。

存储装置410作为一种计算机可读存储介质,可用于存储软件程序、计算机可执行程序以及模块单元,如本申请实施例中的功能组件的显示控制方法对应的程序指令。

存储装置410可主要包括存储程序区和存储数据区,其中,存储程序区可存储操作系统、至少一个功能所需的应用程序;存储数据区可存储根据终端的使用所创建的数据等。此外,存储装置410可以包括高速随机存取存储器,还可以包括非易失性存储器,例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中,存储装置410可进一步包括相对于处理器420远程设置的存储器,这些远程存储器可以通过网络连接。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

输入装置430可用于接收输入的数字、字符信息或语音信息,以及产生与电子设备的用户设置以及功能控制有关的键信号输入。输出装置440可包括显示屏、扬声器等电子设备。

本申请实施例提供的电子设备,可以根据预先确定的监听对象,当用户存在一定操作之后,对功能组件进行显示,在不影响页面美观性的同时,还能够确保功能的齐整,提高用户对前端页面使用的直观感受。

上述实施例中提供的功能组件的显示控制装置、介质及电子设备可执行本申请任意实施例所提供的功能组件的显示控制方法,具备执行该方法相应的功能模块和有益效果。未在上述实施例中详尽描述的技术细节,可参见本申请任意实施例所提供的功能组件的显示控制方法。

注意,上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解,本发明不限于这里所述的特定实施例,对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此,虽然通过以上实施例对本发明进行了较为详细的说明,但是本发明不仅仅限于以上实施例,在不脱离本发明构思的情况下,还可以包括更多其他等效实施例,而本发明的范围由所附的权利要求范围决定。

19页详细技术资料下载
上一篇:一种医用注射器针头装配设备
下一篇:基于拖拽操作打开文件的方法、计算设备及存储介质

网友询问留言

已有0条留言

还没有人留言评论。精彩留言会获得点赞!

精彩留言,会给你点赞!

技术分类