CN114115650A - 页面展示方法、电子设备及存储介质 - Google Patents
页面展示方法、电子设备及存储介质 Download PDFInfo
- Publication number
- CN114115650A CN114115650A CN202111394859.1A CN202111394859A CN114115650A CN 114115650 A CN114115650 A CN 114115650A CN 202111394859 A CN202111394859 A CN 202111394859A CN 114115650 A CN114115650 A CN 114115650A
- Authority
- CN
- China
- Prior art keywords
- area
- sliding
- detail page
- page
- distance
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 73
- 238000004590 computer program Methods 0.000 claims description 13
- 230000001960 triggered effect Effects 0.000 claims description 11
- 230000004044 response Effects 0.000 abstract description 70
- 230000000694 effects Effects 0.000 abstract description 11
- 238000005096 rolling process Methods 0.000 description 74
- 238000010586 diagram Methods 0.000 description 12
- 230000006870 function Effects 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 3
- 230000001360 synchronised effect Effects 0.000 description 3
- 230000006399 behavior Effects 0.000 description 2
- 239000012634 fragment Substances 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000011156 evaluation Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 238000003825 pressing Methods 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 230000008719 thickening Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0483—Interaction with page-structured environments, e.g. book metaphor
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
Abstract
本发明涉及一种页面展示方法、电子设备及存储介质。其中,页面展示方法包括:展示至少两个书籍的详情页面,每个书籍对应一个详情页面;接收用户对详情页面的触发操作,触发操作包括水平滑动操作;基于水平滑动操作所在的区域,对至少两个书籍的详情页面进行联动展示。本发明在接收到用户对多个书籍的详情页面的触发操作之后,可以根据触发操作所在的具体区域对多个书籍的详情页面进行关联滑动展示,提升了页面展示时响应滑动操作的准确性,并增大了信息量,使得页面展示效果更优,进而提升了用户的体验效果。
Description
技术领域
本公开涉及电子设备技术领域,尤其涉及一种页面展示方法、电子设备及存储介质。
背景技术
随着智能电子设备和互联网技术的快速发展,通过阅读应用程序进行电子书的阅读越来越普遍。
目前,用户在阅读应用程序中从多个电子书中查找感兴趣的电子书时,一般可以通过浏览书籍的详情页面对书籍的相关内容有初步的了解,进而确定是否阅读该书籍。由于书籍的详情页面通常展示的内容较多,用户想要了解更多内容时需要滑动操作来实现更多内容的展示,但是相关技术中,用户在滑动页面时的展示效果较差,交互性不强,获得的信息量低,进而导致用户的体验效果较差。
发明内容
为了解决上述至少一个技术问题,本公开提供了一种页面展示方法、电子设备及存储介质。
第一方面,本公开实施例提供了一种页面展示方法,其特征在于,包括:
展示至少两个书籍的详情页面,每个书籍对应一个详情页面;
接收用户对所述详情页面的触发操作,所述触发操作包括水平滑动操作;
基于所述水平滑动操作所在的区域,对所述至少两个书籍的详情页面进行联动展示。
第二方面,本公开实施例提供了一种电子设备,包括:
处理器;
存储器,用于存储可执行指令;
其中,处理器用于从存储器中读取可执行指令,并执行可执行指令以执行以下操作:
展示至少两个书籍的详情页面,每个书籍对应一个详情页面;
接收用户对所述详情页面的触发操作,所述触发操作包括水平滑动操作;
基于所述水平滑动操作所在的区域,对所述至少两个书籍的详情页面进行联动展示。
第三方面,本公开实施例提供了一种计算机可读存储介质,该存储介质存储有计算机程序,当计算机程序被处理器执行时,使得处理器实现第一方面的页面展示方法。
上述技术方案中的一个技术方案具有如下优点或有益效果:
依据本公开实施例的页面展示方法、电子设备及存储介质,能够展示至少两个书籍的详情页面,每个书籍对应一个详情页面;接收用户对详情页面的触发操作,触发操作包括水平滑动操作;基于水平滑动操作所在的区域,对至少两个书籍的详情页面进行联动展示。本公开实施例在接收到用户对多个书籍的详情页面的触发操作之后,可以根据触发操作所在的具体区域对多个书籍的详情页面进行关联滑动展示,提升了页面展示时响应滑动操作的准确性,并增大了信息量,使得页面展示效果更优,进而提升了用户的体验效果。
附图说明
结合附图并参考以下具体实施方式,本公开各实施例的上述和其他特征、优点及方面将变得更加明显。贯穿附图中,相同或相似的附图标记表示相同或相似的元素。应当理解附图是示意性的,原件和元素不一定按照比例绘制。
图1为本公开实施例提供的一种页面展示方法的流程示意图;
图2为本公开实施例提供的一种展示界面的示意图;
图3为本公开实施例提供的另一种展示界面的示意图;
图4为本公开实施例提供的一种视图层的架构示意图;
图5为本公开实施例提供的另一种页面展示方法的流程示意图;
图6为本公开实施例提供的又一种展示界面的示意图;
图7为本公开实施例提供的一种电子设备的结构示意图。
具体实施方式
下面将参照附图更详细地描述本公开的实施例。虽然附图中显示了本公开的某些实施例,然而应当理解的是,本公开可以通过各种形式来实现,而且不应该被解释为限于这里阐述的实施例,相反提供这些实施例是为了更加透彻和完整地理解本公开。应当理解的是,本公开的附图及实施例仅用于示例性作用,并非用于限制本公开的保护范围。
应当理解,本公开的方法实施方式中记载的各个步骤可以按照不同的顺序执行,和/或并行执行。此外,方法实施方式可以包括附加的步骤和/或省略执行示出的步骤。本公开的范围在此方面不受限制。
本文使用的术语“包括”及其变形是开放性包括,即“包括但不限于”。术语“基于”是“至少部分地基于”。术语“一个实施例”表示“至少一个实施例”;术语“另一实施例”表示“至少一个另外的实施例”;术语“一些实施例”表示“至少一些实施例”。其他术语的相关定义将在下文描述中给出。
需要注意,本公开中提及的“第一”、“第二”等概念仅用于对不同的装置、模块或单元进行区分,并非用于限定这些装置、模块或单元所执行的功能的顺序或者相互依存关系。
需要注意,本公开中提及的“一个”、“多个”的修饰是示意性而非限制性的,本领域技术人员应当理解,除非在上下文另有明确指出,否则应该理解为“一个或多个”。
本公开实施方式中的多个装置之间所交互的消息或者信息的名称仅用于说明性的目的,而并不是用于对这些消息或信息的范围进行限制。
为了解决页面展示时响应滑动操作的准确性较低的问题,本公开实施例提供了一种页面展示方法,下面结合具体的实施例对该方法进行介绍。
图1为本公开实施例提供的一种页面展示方法的流程示意图,该方法可以由页面展示装置执行,其中该装置可以采用软件和/或硬件实现,一般可集成在电子设备中。如图1所示,该方法包括:
步骤101、展示至少两个书籍的详情页面,每个书籍对应一个详情页面。
其中,详情页面可以是用于展示一个书籍的相关概括信息的页面,本公开实施例中一个详情页面中展示一个书籍对应的信息。并且,详情页面可以包括封面展示区域和信息展示区域,信息展示区域中包括至少两个子区域。封面展示区域可以是用于展示书籍的封面图像的区域,信息展示区域可以是用于展示书籍的其他相关信息的区域,信息展示区域中可以设置多个子区域,分别用于展示不同类型的信息,例如可以通过各子区域分别展示书籍的名称、简介、章节、标签和评价等信息。
在本公开实施例中,展示至少两个书籍的详情页面,可以包括:在展示界面上展示当前书籍的当前详情页面以及目标书籍的封面展示区域的部分区域,目标书籍为当前书籍的上一书籍和/或下一书籍。
展示界面可以是客户端中用于显示应用程序的内容的用户界面。当前详情页面可以是用户当前浏览的详情页面,显示当前书籍的相关信息。客户端在接收到用户的详情展示触发操作之后,可以在展示界面上展示详情展示触发操作对应的当前书籍的当前详情页面,以及当前书籍的上一书籍和/或下一书籍的封面展示区域的部分区域,也即在展示当前详情页面时还可以展示上一书籍和/或下一书籍的部分封面图像,以使用户浏览到更多内容。上述详情展示触发操作可以是在书籍列表页面中对当前书籍的手势触发操作、语音控制操作等,具体不限。
示例性的,图2为本公开实施例提供的一种展示界面的示意图,如图2所示,图中展示了一个展示界面200的示意图,图中展示了书籍A的当前详情页面、上一书籍和下一书籍的封面展示区域的部分区域,当前详情页面中包括书籍A的封面展示区域201和信息展示区域202,封面展示区域201展示了书籍A的封面图像,信息展示区域202中展示了书籍A的名称、章节、标签、评论、预览和推荐等信息,在封面展示区域201左边展示了上一书籍的部分封面展示区域203,在封面展示区域201的右边展示了下一书籍的部分封面展示区域204。
步骤102、接收用户对详情页面的触发操作,触发操作包括水平滑动操作。
其中,触发操作可以包括用户在详情页面中的手势控制操作(例如点击、长按、双击等)、语音控制操作或者表情控制操作等,本公开实施例中以手势控制操作为例。触发操作可以包括水平滑动操作,水平滑动操作可以是水平方向的滑动操作,可以包括向左滑动和向右滑动。
具体的,客户端在展示至少两个书籍的详情页面之后,可以检测用户的触发操作,接收用户对当前书籍的当前详情页面的水平滑动操作。
步骤103、基于水平滑动操作所在的区域,对至少两个书籍的详情页面进行联动展示。
由于详情页面可以划分为不同的区域,水平滑动操作所在区域可以理解为其具体触发的区域。
在本公开实施例中的,基于水平滑动操作所在的区域,对至少一个书籍的详情页面进行联动展示,可以包括:当水平滑动操作所在的区域为封面展示区域或信息展示区域中的第一子区域时,则在水平方向将当前详情页面滑动切换为下一详情页面进行展示,当前详情页面与下一详情页面对应的书籍不同。
其中,第一子区域可以为信息展示区域中不支持水平方向滚动的子区域,也即不能响应水平方向的滚动操作。具体的,客户端在接收到用户的水平滑动操作之后,可以确定该水平滑动操作在当前详情页面中的触发区域,当该区域为封面展示区域或信息展示区域中的第一子区域时,则可以在水平方向滑动切换整个详情页面,也即将当前详情页面滑动切换为下一详情页面进行展示,具体的下一详情页面与水平滑动操作的滑动方向对应,当水平滑动操作为向左滑动,则下一详情页面为当前书籍的上一书籍的详情页面,当水平滑动操作为向右滑动,则下一详情页面的当前书籍的下一书籍的详情页面。
在一种可行的实施方式中,在水平方向将当前书籍的详情页面滑动切换为下一书籍的详情页面进行展示,可以包括:确定水平滑动操作在触发的第一区域的第一实时滑动距离;根据第一实时滑动距离占第一区域的宽度的实时占比、第二区域的宽度,确定第二区域的第二实时滑动距离;在水平方向基于第一实时滑动距离,将当前详情页面的第一区域或第一区域的关联区域滑动切换为下一详情页面的第一区域或第一区域的关联区域,并且同时基于第二实时滑动距离,将当前详情页面的第二区域滑动切换为下一详情页面的第二区域。
其中,第一区域为封面展示区域,第二区域为信息展示区域;或者,第一区域为第一子区域,第二区域为封面展示区域,第一区域的关联区域为信息展示区域。实时滑动距离可以是水平滑动操作在水平方向的滑动距离,第一实时滑动距离为第一区域的实时滑动距离,第二实时滑动距离为第二区域的实时滑动距离。
具体的,客户端在在水平方向将当前书籍的详情页面滑动切换为下一书籍的详情页面进行展示时,可以先确定水平滑动操作所在第一区域的第一实时滑动距离,并将第一实时滑动距离除以第一区域的宽度确定为实时占比,计算该实时占比与第二区域的宽度的乘积确定为第二实时滑动距离;当第一区域为封面展示区域,第二区域为信息展示区域时,按照第一实时滑动距离在水平方向将当前详情页面的封面展示区域滑动切换为下一详情页面的封面展示区域,并且同时按照第二实时滑动距离在水平方向将当前详情页面的信息展示区域滑动切换为下一详情页面的信息展示区域,或者,当第一区域为第一子区域,第二区域为封面展示区域,按照第一实时滑动距离在水平方向将当前详情页面的信息展示区域滑动切换为下一详情页面的信息展示区域,并且同时按照第二实时滑动距离在水平方向将当前详情页面的封面展示区域滑动切换为下一详情页面的封面展示区域。
上述方案中,通过对用户触发的区域的实时滑动距离的检测以及宽度的实时占比的计算,能够实现详情页面中封面展示区域和信息展示区域同步关联滑动切换。
在另一种可行的实施方式中,在确定水平滑动操作在触发的第一区域的第一实时滑动距离之后,页面展示方法还可以包括:基于第一实时滑动距离将当前详情页面的第一区域或第一区域的关联区域滑动切换为下一详情页面的第一区域或第一区域的关联区域;当基于第一实时滑动距离与预设距离的比对结果和水平滑动操作的具体操作确定第二区域满足滑动条件,则将当前详情页面的第二区域滑动切换为下一详情页面的第二区域。
其中,预设距离可以根据实际情况设置,例如预设距离可以为第一区域宽度,当第一区域为封面展示区域,预设距离可以为封面展示区域的宽度。具体的,客户端在水平方向将当前书籍的详情页面滑动切换为下一书籍的详情页面进行展示时,还可以先按照第一实时滑动距离滑动切换第一区域或第一区域的关联区域,然后在切换的过程中将第一实时滑动距离与预设距离进行比对,判断第一实时距离是否达到预设距离;当根据比对结果和水平滑动操作的具体操作确定第一区域满足滑动条件时,可以将当前详情页面的第二区域滑动切换为下一详情页面的第二区域。
可选的,基于第一实时滑动距离与预设距离的比对结果和水平滑动操作的具体操作确定第二区域满足滑动条件,可以包括:如果水平滑动操作为保持与屏幕接触的点击滑动,直到第一实时滑动距离达到预设距离,或者,第一实时距离达到预设距离并且水平滑动操作从接触屏幕变为不接触屏幕,则确定第二区域满足滑动条件,其中,预设距离为第一区域的宽度。
客户端在判断第二区域是否满足滑动条件时,如果水平滑动操作为手势控制操作中保持与屏幕接触的点击滑动,也即用户的手指不离开屏幕进行滑动,直到滑动到第一实时滑动距离达到预设距离,则确定第二区域满足滑动条件;或者,如果水平滑动操作为手势控制操作中与屏幕接触的操作,在第一实时滑动距离达到预设距离并且水平滑动操作从接触屏幕变为不接触屏幕时,也即用户的手指从接触屏幕变为离开屏幕,则可以确定第二区域满足滑动条件。
上述方案中,在水平方向将当前书籍的详情页面滑动切换为下一书籍的详情页面时,可以先滑动切换用户触发的一个区域,当这个区域滑动到一定程度时再滑动切换另一个区域,使得不同区域能够关联滑动切换。
参见图2,图中三个手势表征用户的水平滑动操作,双向箭头表征水平滑动操作包括向左滑动和向右滑动。
示例性的,图3为本公开实施例提供的另一种展示界面的示意图,如图3所示,图中展示了在水平方向滑动切换详情页面过程中的展示界面300,图中向左的箭头表示用户的向左滑动,相较于图2,图2中的书籍A的详情页面中不同区域同步关联滑动到展示界面的左边,仅保留了右边的一部分,而右边的书籍B的详情页面不同区域同步关联向左滑动到展示界面中,展示了左边的一部分。图3中示例性的展示详情页面中不同区域同步关联滑动的情况,还存在另外一种当一个区域滑动到一定程度再滑动另一个区域的情况,图中未示出。
依据本公开实施例的页面展示方法,能够展示至少两个书籍的详情页面,每个书籍对应一个详情页面;接收用户对详情页面的触发操作,触发操作包括水平滑动操作;基于水平滑动操作所在的区域,对至少两个书籍的详情页面进行联动展示。本公开实施例在接收到用户对多个书籍的详情页面的触发操作之后,可以根据触发操作所在的具体区域对多个书籍的详情页面进行关联滑动展示,提升了页面展示时响应滑动操作的准确性,并增大了信息量,使得页面展示效果更优,进而提升了用户的体验效果。
在本公开实施例中,触发操作还可以包括水平滚动操作,在接收用户对详情页面的触发操作之后,页面展示方法还可以包括:当水平滚动操作所在区域为信息展示区域中的第二子区域时,则将第二子区域中的内容在水平方向滚动展示。
其中,第二子区域为信息展示区域支持水平方向滚动的子区域,与上述第一子区域的属性相反,能够响应水平方向的滚动操作。水平滚动操作可以是在详情页面内部实现的水平方向的内容滚动操作。
具体的,当触发操作为水平滚动操作,并且水平滚动操作在详情页面中的触发区域为信息展示区域中的第二子区域,则可以将第二自区域中的内容在水平方向滚动展示,具体可以向左滚动或向右滚动。例如,参见图2,假设水平滚动操作所在区域为信息展示区域202中的评论的子区域,展示界面中仅展示一个评论,当评论的数量较多时,该子区域支持水平方向滚动,可以将当前评论向左滚动展示上一评论,或者将当前评论向右滚动展示下一评论。
上述方案中,在展示多个书籍的详情页面之后,可以接收用户的对部分支持水平方向滚动的子区域的水平滚动操作,并将该子区域的内容滚动展示,使得用户能够看到该子区域中的更多内容,进而提升了用户的体验效果。
在一些实施例中,触发操作还包括垂直滚动操作,在接收用户对详情页面的触发操作之后,页面展示方法还可以包括:基于垂直滚动操作的滚动距离以及垂直滚动操作的方向,在垂直方向滚动展示详情页面。
其中,垂直滚动操作可以是在垂直方向上的滚动操作,具体方向可以包括向上滚动和向下滚动。滚动距离可以是详情页面中的内容在垂直滚动操作的作用下的实时移动距离。
在本公开实施例中,详情页面通过第一视图层设置,封面展示区域和信息展示区域通过第二视图层设置,子区域通过第三视图层设置,第二视图层嵌套入第一视图层中,第三视图层嵌套入第二视图层中。
其中,视图层也即视图(View),视图是一个矩形区域,它负责这个区域里的绘制和事件处理,针对操作系统为安卓系统、IOS系统等系统均可以通过视图来设置用户界面。
第一视图层可以是详情页面的最外部的视图层,该第一视图层控制范围为整个详情页面。第二视图层可以是嵌套在第一视图层中的子视图层,封面展示区域和信息展示区域可以设置在一个第二视图层中,或者封面展示区域和信息展示区域可以分别通过两个第二视图层进行设置。第三视图层可以嵌套在信息展示区域对应的第二视图层中,对应信息展示区域中的子区域。
示例性的,图4为本公开实施例提供的一种视图层的架构示意图,如图4所示,图中展示了一个详情页面的视图层的架构,第一视图层在最外层,支持垂直方向的滚动;第二视图层嵌套入第一视图层中,第二视图层支持水平方向滚动和垂直方向滚动;第三视图层嵌套入信息展示区域中的第二视图层中,分别对应不同的子区域,如图中书籍信息、标签、章节和评论可以设置为一种类型的第三视图层,不支持水平方向的滚动,而预览和推荐可以设置为支持水平方向滚动的第三视图层,并且预览和推荐内部还分别通过第三视图层的两个独立的支持垂直方向的滚动的子视图层设置。
如图4中的视图层架构,在不同的操作系统中,视图层的技术实现不同,本公开实施例通过安卓系统和IOS系统为例进行说明。
当操作系统为安卓系统,详情页面的最外层的第一视图层可以通过安卓系统中的帧布局(FrameLayout)设置,详情页面的主显示区域通过CoordinatorLayout设置,CoordinatorLayout相当于一个加强版的FrameLayout,可以控制子视图层的交互行为。第一视图层中可以嵌套上下两个第二视图层,上面的第二视图层对应工具栏和封面展示区域,工具栏可以通过AppBarLayout设置,AppBarLayout用于赋予工具栏(Toolbar)的滚动行为,封面展示区域可以通过支持水平方向滑动的ViewPager2设置,AppBarLayout可以跟随ViewPager2进行水平方向的滑动。下面的第二视图层对应信息展示区域,可以通过另一个支持水平方向滑动的ViewPager2设置,ViewPager2内部设置Fragment,Fragment内部可以设置支持垂直方向滚动的NestedScrollView,使得信息展示区域可以在垂直方向滚动。第三视图层嵌套入第二视图层,对应信息展示区域中的每个子区域,针对支持水平方向滚动的第三视图层可以通过自定义的RecyclerView设置,可以展示该子区域更多内容,例如评论;针对支持水平方向滚动的第三视图层可以通过FrameLayout及ViewPager2设置,如图4中的预览和推荐对应的第三视图层,并且该第三视图层内部还设置两个独立的子视图层,子视图层可以通过上述自定义的RecyclerView设置,支持垂直方向的滚动。
当操作系统为IOS系统,详情页面的最外层的第一视图层可以通过IOS系统中支持垂直方向的滚动自定义CoverPageView设置,该CoverPageView基于UIScrollView设置。第一视图层中可以嵌套上下两个第二视图层,上面的第二视图层对应封面展示区域,可以通过自定义CoverView设置,CoverView包括UICollectionView和自定义CoverFlowViewLayout,支持水平方向的滑动,同时可以检测滑动距离为与下方的第二视图层的联动做准备。下面的第二视图层对应信息展示区域,可以通过支持水平方向滚动的自定义PagingView和支持垂直方向滚动的自定义BookDetailView设置,PagingView也可以包括上述UICollectionView,也即信息展示区域与封面展示区域的UI格式相同,BookDetailView可以包括IGList。第三视图层嵌套入第二视图层,对应信息展示区域中的每个子区域,针对不包括标签及其内容的第三视图层可以通过自定义的支持水平方向滚动的BookinfoView设置,针对包括标签及其内容的第三视图层可以通过支持水平方向滚动的自定义的JX Segmented View设置,并且该第三视图层内部还设置两个独立的支持垂直方向滚动的子视图层,每个子视图层单独支持垂直方向的滚动。
基于上述安卓系统或IOS系统的视图层的架构,在实现本公开实施例的页面展示方法时,可以通过禁止视图层的一个属性、设置视图层的监听事件或者视图层的响应顺序等方式实现具体的逻辑。
示例性的,图5为本公开实施例提供的另一种页面展示方法的流程示意图,如图5所示,在一种可行的实施方式中,基于垂直滚动操作的滚动距离以及垂直滚动操作的方向,在垂直方向滚动展示详情页面,可以包括如下步骤:
步骤501、根据垂直滚动操作的方向确定视图层的响应顺序。
其中,视图层的响应顺序可以理解为上述多个视图层针对垂直滚动操作进行响应时的先后顺序,当垂直滚动操作的方向不同时,视图层的响应顺序不同。
在本公开实施例中,根据垂直滚动操作的方向确定视图层的响应顺序,包括:当垂直滚动操作的方向为向上滚动,则视图层的响应顺序为从小到大,其中,视图层按照从小到大的顺序依次为:第一视图层、第二视图层和第三视图层;当垂直滚动操作的方向为向下滚动,则视图层的响应顺序为从大到小。
具体的,客户端在接收到垂直滚动操作之后,可以获取滚动距离,并判断垂直滚动操作的方向,当垂直滚动操作的方向为向上滚动,则视图层的响应顺序可以为从小到大,也即先第一视图层响应,再第二视图层响应,最后第三视图层响应;当垂直滚动操作的方向为向下滚动,则视图层的响应顺序为从大到小,视图层按照从大到小的顺序依次为:第三视图层、第二视图层和第一视图层。
步骤502、按照视图层的响应顺序,依次根据滚动距离以及各视图层对应的区域的最大滚动距离,在垂直滚动操作的方向滚动展示各视图层对应的区域。
其中,各视图层对应的区域的最大滚动距离可以是预先为详情页面中的每个支持在垂直方向滚动的区域设置的滚动距离的最大阈值,可以包括详情页面的最大滚动距离、封面展示区域的最大滚动距离、信息展示区域的最大滚动距离以及信息展示区域中的各子区域的最大滚动距离,由于封面展示区域不支持在垂直方向的滚动,封面展示区域的最大滚动距离即为详情页面的最大滚动距离相同。第三视图层对应的区域为至少两个子区域中支持在垂直方向滚动的子区域。
在本公开实施例中,按照视图层的响应顺序,依次根据滚动距离以及各视图层对应的区域的最大滚动距离,在垂直滚动操作的方向滚动展示各视图层对应的区域,可以包括:将目标视图层确定为响应视图层,在垂直滚动操作的方向滚动展示响应视图层对应的区域,并判断响应视图层对应的区域是否达到其最大滚动距离,若否,则继续滚动展示响应视图层对应的区域;其中,目标视图层为视图层的响应顺序中排序最靠前的一个视图层;若是,则将目标视图层的下一视图层确定为响应视图层,继续在垂直滚动操作的方向滚动展示响应视图层对应的区域,直到视图层响应结束为止。
其中,响应视图层可以理解为当前正在响应垂直滚动操作执行后续逻辑的视图层。目标视图层可以根据当前的视图层的响应顺序确定,可以是排序最靠前的视图层,当前的视图层的响应顺序为从小到大时,目标视图层为第一视图层,当前的视图层的响应顺序为从大到小时,目标视图层为第三视图层。
具体的,客户端在垂直滚动操作的方向滚动展示各视图层对应的区域时,可以将目标视图层确定为响应视图层,在垂直滚动操作的方向对响应视图层对应的区域进行垂直滚动,并判断响应视图层对应的区域是否达到最大滚动距离,如果没有达到,则继续滚动响应视图层对应的区域;如果达到,则可以根据视图层的响应顺序将目标视图层的下一视图层确定为新的响应视图层,垂直滚动展示新的响应视图层对应区域,并继续判断是否达到最大滚动距离,直到视图层响应结束则停止滚动。
示例性的,假设垂直滚动操作的方向为向上滚动,当前的视图层的响应顺序为从小到大时,判断第一视图层对应的详情页面是否达到最大滚动距离,如果没有达到,则向上滚动详情页面;如果达到,说明第二视图层的信息展示区域向上滚动到预设展示位置,例如滚动到屏幕顶端,可以向上滚动第二视图层的信息展示区域,判断信息展示区域是否达到最大滚动距离,直到视图层响应结束为止,也即第三视图层对应的区域也达到最大滚动距离,则停止滚动。
又如:假设垂直滚动操作的方向为向下滚动,当前的视图层的响应顺序为从大到小时,判断第三视图层对应的区域是否达到最大滚动距离,如果没有达到,则向下滚动第三视图层对应的区域;如果达到,说明第三视图层对应的区域不能再向下滚动,例如第三视图层对应的区域的内容滚动到展示首行内容,可以向下滚动展示第二视图层的信息展示区域,判断信息展示区域是否达到最大滚动距离,直到视图层响应结束为止,也即第一视图层对应的详情页面也达到最大滚动距离,详情页面展示到最顶部的区域,不能再向上滚动,则停止滚动。
示例性的,图6为本公开实施例提供的又一种展示界面的示意图,如图6所示,图中展示了一个垂直滚动操作之后的展示界面601,图中手势表征垂直滚动操作,向上的箭头表示向上滚动,与图2中的详情页面比较,详情页面中的封面展示区域201、上一书籍的部分封面展示区域203、下一书籍的部分封面展示区域204以及信息展示区域202中的大部分均已经向上滚动到离开展示界面,信息展示区域202中的子区域205滚动到展示界面的顶端,也即置顶展示,具体如图6中的子区域601,说明信息展示区域202达到最大滚动距离,之后将子区域601中推荐标签下的内容继续向上滚动,直到滚动到最后内容。图6中的子区域601与图2中的子区域205为同一个子区域,不同的是子区域205中展示的是标签预览下的内容,而子区域601中展示的是标签推荐下的内容,当用户在子区域205中进行向左滚动或点击推荐标签时,可以切换到图6的子区域601展示推荐标签的内容。
上述方案中,在展示多个书籍的详情页面之后,可以接收用户的的垂直滚动操作,并根据滚动距离、方向、视图层的响应顺序在垂直方向依次滚动详情页面以及内部的各个支持垂直滚动的区域,满足用户在垂直方向的滚动展示需求,避免了相关技术中垂直滚动时可能存在的两个区域响应矛盾的问题,使得每个区域的内容达到最优的展示效果,进而提升了用户的体验效果。
在一些实施例中,页面展示方法还可以包括:接收用户对详情页面中目标子区域的水平滚动操作,目标子区域包括至少两个标签的内容,其中,不同标签的内容具有不同的长度;在水平方向滚动展示目标子区域中的至少两个标签及其内容。
可选的,在水平方向滚动展示目标子区域中的至少两个标签及其内容,包括:基于第三视图层,在水平方向将当前标签及其内容切换为水平滚动操作的滚动方向对应的下一标签及其内容进行展示;其中,当操作系统为IOS系统,第三视图层基于预先封装的分段视图控件设置;当操作系统为安卓系统,第三视图层基于页面切换视图设置。
可选的,在IOS系统,可以采用键值监听模块检测垂直滚动操作的滚动距离。
可选的,当目标子区域的标签区域到达预设展示位置时,禁止标签区域在垂直方向滚动,标签区域中包括至少两个标签。
可选的,页面展示方法还可以包括:当当前标签的内容向上滚动到最后内容,则将当前详情页面切换为目标书籍的书籍展示页面进行展示。
可选的,页面展示方法还可以包括:当当前标签的内容为预览内容,在目标书籍的书籍展示页面中采用预设方式突出展示预览内容的最后内容,预设方式包括加粗、高亮以及添加下划线中的至少一种。
可选的,在继续向上滚动展示目标子区域中的当前标签的内容之后,页面展示方法还可以包括:接收用户对详情页面中目标子区域的二次水平滚动操作;在水平方向将当前标签切换为二次水平水平滚动操作的滚动方向的下一标签,并且同时将滚动展示之后的当前标签的内容切换为二次水平滚动操作的滚动方向的下一标签的内容,其中,滚动展示之后的当前标签的内容与下一标签的内容的展示内容所在长度位置不同。
可选的,页面展示方法还可以包括:接收用户对目标子区域中的目标标签的切换触发操作;将当前标签及其内容切换为目标标签及其内容进行展示。
可选的,目标子区域通过第三视图层设置,不同标签的内容通过不同子视图层设置,子视图层嵌套入第三视图层。
本公开实施例还提供了一种电子设备,该电子设备可以包括处理器和存储器,存储器可以用于存储可执行指令。其中,处理器可以用于从存储器中读取可执行指令,并执行可执行指令以执行以下操作:展示至少两个书籍的详情页面,每个书籍对应一个详情页面;接收用户对详情页面的触发操作,所述触发操作包括水平滑动操作;基于所述水平滑动操作所在的区域,对所述至少两个书籍的详情页面进行联动展示。
图7为本公开实施例提供的一种电子设备的结构示意图。本发明实施例中的电子设备700可以为上述所说明的电子设备。还需说明的是,图7示出的电子设备700仅仅是一个示例,不应对本发明实施例的功能和使用范围带来任何限制。
该电子设备700传统上包括处理器710和以存储器720形式的计算机程序产品或者计算机可读介质。存储器720可以是诸如闪存、EEPROM(电可擦除可编程只读存储器)、EPROM、硬盘或者ROM之类的电子存储器。存储器720具有用于执行上述页面展示方法中的任何方法步骤的可执行指令(或程序代码)7211的存储空间721。例如,用于可执行指令的存储空间721可以包括分别用于实现上面的页面展示方法中的各种步骤的各个可执行指令7211。这些可执行指令可以从一个或者多个计算机程序产品中读出或者写入到这一个或者多个计算机程序产品中。这些计算机程序产品包括诸如硬盘,光盘(CD)、存储卡或者软盘之类的程序代码载体。这样的计算机程序产品通常为便携式或者固定存储单元。该存储单元可以具有与图7的电子设备中的存储器720类似布置的存储段或者存储空间等。可执行指令可以例如以适当形式进行压缩。通常,存储单元包括用于执行根据本发明的页面展示方法步骤的可执行指令,即可以由例如诸如处理器710之类的处理器读取的代码,这些代码当由电子设备运行时,导致该电子设备执行上面所描述的页面展示方法中的各个步骤。
本发明实施例还提供了一种计算机可读存储介质,其上存储有计算机程序指令,计算机程序指令在被处理器运行时使得处理器执行本发明各实施例所提供的页面展示方法。
该计算机可读存储介质可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以包括但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括:具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。
上述计算机可读介质可以是上述电子设备中所包含的;也可以是单独存在,而未装配入该电子设备中。
在本发明实施例中,可以以一种或多种程序设计语言或其组合来编写用于执行本发明的操作的计算机程序代码,上述程序设计语言包括但不限于面向对象的程序设计语言—诸如Java、Smalltalk、C++,还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中,远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机,或者,可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
本发明的各个部件实施例可以全部或部分步骤以硬件实现,或者以在一个或者多个处理器上运行的软件模块实现,或者以它们的组合实现。本领域的技术人员应当理解,可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的页面展示装置中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如,计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上,或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到,或者在载体信号上提供,或者以任何其他形式提供。
a1、根据本公开的一个或多个实施例,本公开提供了一种页面展示方法,包括:
展示至少两个书籍的详情页面,每个书籍对应一个详情页面;
接收用户对所述详情页面的触发操作,所述触发操作包括水平滑动操作;
基于所述水平滑动操作所在的区域,对所述至少两个书籍的详情页面进行联动展示。
a2、根据a1所述的方法,其中,所述详情页面包括封面展示区域和信息展示区域,所述信息展示区域中包括至少两个子区域。
a3、根据a2所述的方法,其中,基于所述水平滑动操作所在的区域,对所述至少一个书籍的详情页面进行联动展示,包括:
当所述水平滑动操作所在的区域为所述封面展示区域或所述信息展示区域中的第一子区域时,则在水平方向将当前详情页面滑动切换为下一详情页面进行展示,所述当前详情页面与所述下一详情页面对应的书籍不同。
a4、根据a3所述的方法,其中,所述第一子区域为所述信息展示区域中不支持水平方向滚动的子区域。
a5、根据a3所述的方法,其中,所述在水平方向将当前书籍的详情页面滑动切换为下一书籍的详情页面进行展示,包括:
确定所述水平滑动操作在触发的第一区域的第一实时滑动距离;
根据所述第一实时滑动距离占所述第一区域的宽度的实时占比、第二区域的宽度,确定所述第二区域的第二实时滑动距离;
在水平方向基于所述第一实时滑动距离,将所述当前详情页面的第一区域或所述第一区域的关联区域滑动切换为所述下一详情页面的第一区域或所述第一区域的关联区域,并且同时基于所述第二实时滑动距离,将所述当前详情页面的第二区域滑动切换为所述下一详情页面的第二区域。
a6、根据a5所述的方法,其中,在确定所述水平滑动操作在触发的第一区域的第一实时滑动距离之后,所述方法还包括:
基于所述第一实时滑动距离将所述当前详情页面的第一区域或所述第一区域的关联区域滑动切换为所述下一详情页面的第一区域或所述第一区域的关联区域;
当基于所述第一实时滑动距离与预设距离的比对结果和所述水平滑动操作的具体操作确定所述第二区域满足滑动条件,则将所述当前详情页面的第二区域滑动切换为所述下一详情页面的第二区域。
a7、根据a6所述的方法,其中,基于所述第一实时滑动距离与预设距离的比对结果和所述水平滑动操作的具体操作确定所述第二区域满足滑动条件,包括:
如果所述水平滑动操作为保持与屏幕接触的点击滑动,直到所述第一实时滑动距离达到预设距离,或者,所述第一实时距离达到所述预设距离并且所述水平滑动操作从接触屏幕变为不接触屏幕,则确定所述第二区域满足滑动条件,其中,所述预设距离为所述第一区域的宽度。
a8、根据a5-a7中任一所述的方法,其中,
第一区域为所述封面展示区域,所述第二区域为所述信息展示区域;
或者,所述第一区域为所述第一子区域,所述第二区域为所述封面展示区域,所述第一区域的关联区域为所述信息展示区域。
a9、根据a2所述的方法,其中,所述触发操作还包括水平滚动操作,在接收用户对所述详情页面的触发操作之后,所述方法还,包括:
当所述水平滚动操作所在区域为所述信息展示区域中的第二子区域时,则将所述第二子区域中的内容在水平方向滚动展示。
a10、根据a9所述的方法,其中,所述第二子区域为所述信息展示区域支持水平方向滚动的子区域。
a11、根据a2所述的方法,其中,所述触发操作还包括垂直滚动操作,在接收用户对所述详情页面的触发操作之后,所述方法还包括:
基于所述垂直滚动操作的滚动距离以及所述垂直滚动操作的方向,在垂直方向滚动展示所述详情页面。
a12、根据a11所述的方法,其中,所述详情页面通过第一视图层设置,所述封面展示区域和所述信息展示区域通过第二视图层设置,所述子区域通过第三视图层设置,所述第二视图层嵌套入所述第一视图层中,所述第三视图层嵌套入所述第二视图层中。
a13、根据a12所述的方法,其中,基于所述垂直滚动操作的滚动距离以及所述垂直滚动操作的方向,在垂直方向滚动展示所述详情页面,包括:
根据所述垂直滚动操作的方向确定视图层的响应顺序;
按照所述视图层的响应顺序,依次根据所述滚动距离以及各视图层对应的区域的最大滚动距离,在所述垂直滚动操作的方向滚动展示各视图层对应的区域。
a14、根据a13所述的方法,其中,根据所述垂直滚动操作的方向确定视图层的响应顺序,包括:
当所述垂直滚动操作的方向为向上滚动,则所述视图层的响应顺序为从小到大,其中,所述视图层按照从小到大的顺序依次为:第一视图层、第二视图层和第三视图层;
当所述垂直滚动操作的方向为向下滚动,则所述视图层的响应顺序为从大到小。
a15、根据a13所述的方法,其中,按照所述视图层的响应顺序,依次根据所述滚动距离以及各视图层对应的区域的最大滚动距离,在所述垂直滚动操作的方向滚动展示各视图层对应的区域,包括:
将目标视图层确定为响应视图层,在所述垂直滚动操作的方向滚动展示所述响应视图层对应的区域,并判断所述响应视图层对应的区域是否达到其最大滚动距离,若否,则继续滚动展示所述响应视图层对应的区域;其中,所述目标视图层为所述视图层的响应顺序中排序最靠前的一个视图层;
若是,则将所述目标视图层的下一视图层确定为所述响应视图层,继续在所述垂直滚动操作的方向滚动展示所述响应视图层对应的区域,直到所述视图层响应结束为止。
a16、根据a13-a15中任一所述的方法,其中,所述第三视图层对应的区域为所述至少两个子区域中支持在垂直方向滚动的子区域。
a17、根据a2所述的方法,其中,所述展示至少两个书籍的详情页面,包括:
在展示界面上展示当前书籍的当前详情页面以及目标书籍的封面展示区域的部分区域,所述目标书籍为所述当前书籍的上一书籍和/或下一书籍。
a18、根据本公开的一个或多个实施例,本公开提供了一种电子设备,其中,包括:
处理器;
存储器,用于存储可执行指令;
其中,所述处理器用于从所述存储器中读取所述可执行指令,并执行所述可执行指令以执行以下操作:
展示至少两个书籍的详情页面,每个书籍对应一个详情页面;
接收用户对所述详情页面的触发操作,所述触发操作包括水平滑动操作;
基于所述水平滑动操作所在的区域,对所述至少两个书籍的详情页面进行联动展示。
a19、根据a18所述的电子设备,其中,所述详情页面包括封面展示区域和信息展示区域,所述信息展示区域中包括至少两个子区域。
a20、根据a19所述的电子设备,其中,所述可执行指令进一步使所述处理器执行以下操作:
其中,基于所述水平滑动操作所在的区域,对所述至少一个书籍的详情页面进行联动展示,包括:
当所述水平滑动操作所在的区域为所述封面展示区域或所述信息展示区域中的第一子区域时,则在水平方向将当前详情页面滑动切换为下一详情页面进行展示,所述当前详情页面与所述下一详情页面对应的书籍不同。
a21、根据a20所述的电子设备,其中,所述第一子区域为所述信息展示区域中不支持水平方向滚动的子区域。
a22、根据a20所述的电子设备,其中,所述可执行指令进一步使所述处理器执行以下操作:
其中,所述在水平方向将当前书籍的详情页面滑动切换为下一书籍的详情页面进行展示,包括:
确定所述水平滑动操作在触发的第一区域的第一实时滑动距离;
根据所述第一实时滑动距离占所述第一区域的宽度的实时占比、第二区域的宽度,确定所述第二区域的第二实时滑动距离;
在水平方向基于所述第一实时滑动距离,将所述当前详情页面的第一区域或所述第一区域的关联区域滑动切换为所述下一详情页面的第一区域或所述第一区域的关联区域,并且同时基于所述第二实时滑动距离,将所述当前详情页面的第二区域滑动切换为所述下一详情页面的第二区域。
a23、根据a22所述的电子设备,其中,在确定所述水平滑动操作在触发的第一区域的第一实时滑动距离之后,所述可执行指令进一步使所述处理器执行以下操作:
基于所述第一实时滑动距离将所述当前详情页面的第一区域或所述第一区域的关联区域滑动切换为所述下一详情页面的第一区域或所述第一区域的关联区域;
当基于所述第一实时滑动距离与预设距离的比对结果和所述水平滑动操作的具体操作确定所述第二区域满足滑动条件,则将所述当前详情页面的第二区域滑动切换为所述下一详情页面的第二区域。
a24、根据a23所述的电子设备,其中,所述可执行指令进一步使所述处理器执行以下操作:
其中,基于所述第一实时滑动距离与预设距离的比对结果和所述水平滑动操作的具体操作确定所述第二区域满足滑动条件,包括:
如果所述水平滑动操作为保持与屏幕接触的点击滑动,直到所述第一实时滑动距离达到预设距离,或者,所述第一实时距离达到所述预设距离并且所述水平滑动操作从接触屏幕变为不接触屏幕,则确定所述第二区域满足滑动条件,其中,所述预设距离为所述第一区域的宽度。
a25、根据a22-a24中任一所述的电子设备,其中,
第一区域为所述封面展示区域,所述第二区域为所述信息展示区域;
或者,所述第一区域为所述第一子区域,所述第二区域为所述封面展示区域,所述第一区域的关联区域为所述信息展示区域。
a26、根据a19所述的电子设备,其中,所述触发操作还包括水平滚动操作,在接收用户对所述详情页面的触发操作之后,所述可执行指令进一步使所述处理器执行以下操作:
当所述水平滚动操作所在区域为所述信息展示区域中的第二子区域时,则将所述第二子区域中的内容在水平方向滚动展示。
a27、根据a26所述的电子设备,其中,所述第二子区域为所述信息展示区域支持水平方向滚动的子区域。
a28、根据a19所述的电子设备,其中,所述触发操作还包括垂直滚动操作,在接收用户对所述详情页面的触发操作之后,所述可执行指令进一步使所述处理器执行以下操作:
基于所述垂直滚动操作的滚动距离以及所述垂直滚动操作的方向,在垂直方向滚动展示所述详情页面。
a29、根据a28所述的电子设备,其中,所述详情页面通过第一视图层设置,所述封面展示区域和所述信息展示区域通过第二视图层设置,所述子区域通过第三视图层设置,所述第二视图层嵌套入所述第一视图层中,所述第三视图层嵌套入所述第二视图层中。
a30、根据a29所述的电子设备,其中,所述可执行指令进一步使所述处理器执行以下操作:
其中,基于所述垂直滚动操作的滚动距离以及所述垂直滚动操作的方向,在垂直方向滚动展示所述详情页面,包括:
根据所述垂直滚动操作的方向确定视图层的响应顺序;
按照所述视图层的响应顺序,依次根据所述滚动距离以及各视图层对应的区域的最大滚动距离,在所述垂直滚动操作的方向滚动展示各视图层对应的区域。
a31、根据a30所述的电子设备,其中,所述可执行指令进一步使所述处理器执行以下操作:
其中,根据所述垂直滚动操作的方向确定视图层的响应顺序,包括:
当所述垂直滚动操作的方向为向上滚动,则所述视图层的响应顺序为从小到大,其中,所述视图层按照从小到大的顺序依次为:第一视图层、第二视图层和第三视图层;
当所述垂直滚动操作的方向为向下滚动,则所述视图层的响应顺序为从大到小。
a32、根据a30所述的电子设备,其中,所述可执行指令进一步使所述处理器执行以下操作:
其中,按照所述视图层的响应顺序,依次根据所述滚动距离以及各视图层对应的区域的最大滚动距离,在所述垂直滚动操作的方向滚动展示各视图层对应的区域,包括:
将目标视图层确定为响应视图层,在所述垂直滚动操作的方向滚动展示所述响应视图层对应的区域,并判断所述响应视图层对应的区域是否达到其最大滚动距离,若否,则继续滚动展示所述响应视图层对应的区域;其中,所述目标视图层为所述视图层的响应顺序中排序最靠前的一个视图层;
若是,则将所述目标视图层的下一视图层确定为所述响应视图层,继续在所述垂直滚动操作的方向滚动展示所述响应视图层对应的区域,直到所述视图层响应结束为止。
a33、根据a30-a32中任一所述的电子设备,其中,所述第三视图层对应的区域为所述至少两个子区域中支持在垂直方向滚动的子区域。
a34、根据a19所述的电子设备,其中,所述可执行指令进一步使所述处理器执行以下操作:
所述展示至少两个书籍的详情页面,包括:
在展示界面上展示当前书籍的当前详情页面以及目标书籍的封面展示区域的部分区域,所述目标书籍为所述当前书籍的上一书籍和/或下一书籍。
根据本公开的一个或多个实施例,本公开提供了一种计算机可读存储介质,存储介质存储有计算机程序,计算机程序用于执行如本公开提供的任一的页面展示方法。
以上描述仅为本发明的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解,本发明中所涉及的公开范围,并不限于上述技术特征的特定组合而成的技术方案,同时也应涵盖在不脱离上述公开构思的情况下,由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本发明中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。
此外,虽然采用特定次序描绘了各操作,但是这不应当理解为要求这些操作以所示出的特定次序或以顺序次序执行来执行。在一定环境下,多任务和并行处理可能是有利的。同样地,虽然在上面论述中包含了若干具体实现细节,但是这些不应当被解释为对本发明的范围的限制。在单独的实施例的上下文中描述的某些特征还可以组合地实现在单个实施例中。相反地,在单个实施例的上下文中描述的各种特征也可以单独地或以任何合适的子组合的方式实现在多个实施例中。
尽管已经采用特定于结构特征和/或方法逻辑动作的语言描述了本主题,但是应当理解所附权利要求书中所限定的主题未必局限于上面描述的特定特征或动作。相反,上面所描述的特定特征和动作仅仅是实现权利要求书的示例形式。
Claims (10)
1.一种页面展示方法,其特征在于,包括:
展示至少两个书籍的详情页面,每个书籍对应一个详情页面;
接收用户对所述详情页面的触发操作,所述触发操作包括水平滑动操作;
基于所述水平滑动操作所在的区域,对所述至少两个书籍的详情页面进行联动展示。
2.根据权利要求1所述的方法,其特征在于,所述详情页面包括封面展示区域和信息展示区域,所述信息展示区域中包括至少两个子区域。
3.根据权利要求2所述的方法,其特征在于,基于所述水平滑动操作所在的区域,对所述至少一个书籍的详情页面进行联动展示,包括:
当所述水平滑动操作所在的区域为所述封面展示区域或所述信息展示区域中的第一子区域时,则在水平方向将当前详情页面滑动切换为下一详情页面进行展示,所述当前详情页面与所述下一详情页面对应的书籍不同。
4.根据权利要求3所述的方法,其特征在于,所述第一子区域为所述信息展示区域中不支持水平方向滚动的子区域。
5.根据权利要求3所述的方法,其特征在于,所述在水平方向将当前书籍的详情页面滑动切换为下一书籍的详情页面进行展示,包括:
确定所述水平滑动操作在触发的第一区域的第一实时滑动距离;
根据所述第一实时滑动距离占所述第一区域的宽度的实时占比、第二区域的宽度,确定所述第二区域的第二实时滑动距离;
在水平方向基于所述第一实时滑动距离,将所述当前详情页面的第一区域或所述第一区域的关联区域滑动切换为所述下一详情页面的第一区域或所述第一区域的关联区域,并且同时基于所述第二实时滑动距离,将所述当前详情页面的第二区域滑动切换为所述下一详情页面的第二区域。
6.根据权利要求5所述的方法,其特征在于,在确定所述水平滑动操作在触发的第一区域的第一实时滑动距离之后,所述方法还包括:
基于所述第一实时滑动距离将所述当前详情页面的第一区域或所述第一区域的关联区域滑动切换为所述下一详情页面的第一区域或所述第一区域的关联区域;
当基于所述第一实时滑动距离与预设距离的比对结果和所述水平滑动操作的具体操作确定所述第二区域满足滑动条件,则将所述当前详情页面的第二区域滑动切换为所述下一详情页面的第二区域。
7.根据权利要求6所述的方法,其特征在于,基于所述第一实时滑动距离与预设距离的比对结果和所述水平滑动操作的具体操作确定所述第二区域满足滑动条件,包括:
如果所述水平滑动操作为保持与屏幕接触的点击滑动,直到所述第一实时滑动距离达到预设距离,或者,所述第一实时距离达到所述预设距离并且所述水平滑动操作从接触屏幕变为不接触屏幕,则确定所述第二区域满足滑动条件,其中,所述预设距离为所述第一区域的宽度。
8.根据权利要求5-7中任一所述的方法,其特征在于,
第一区域为所述封面展示区域,所述第二区域为所述信息展示区域;
或者,所述第一区域为所述第一子区域,所述第二区域为所述封面展示区域,所述第一区域的关联区域为所述信息展示区域。
9.一种电子设备,其特征在于,包括:
处理器;
存储器,用于存储可执行指令;
其中,所述处理器用于从所述存储器中读取所述可执行指令,并执行所述可执行指令以执行以下操作:
展示至少两个书籍的详情页面,每个书籍对应一个详情页面;
接收用户对所述详情页面的触发操作,所述触发操作包括水平滑动操作;
基于所述水平滑动操作所在的区域,对所述至少两个书籍的详情页面进行联动展示。
10.一种计算机可读存储介质,其特征在于,所述存储介质存储有计算机程序,当所述计算机程序被处理器执行时,使得处理器实现用上述权利要求1-8中任一项所述的页面展示方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111394859.1A CN114115650A (zh) | 2021-11-23 | 2021-11-23 | 页面展示方法、电子设备及存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111394859.1A CN114115650A (zh) | 2021-11-23 | 2021-11-23 | 页面展示方法、电子设备及存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN114115650A true CN114115650A (zh) | 2022-03-01 |
Family
ID=80439897
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202111394859.1A Pending CN114115650A (zh) | 2021-11-23 | 2021-11-23 | 页面展示方法、电子设备及存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN114115650A (zh) |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106445341A (zh) * | 2016-09-23 | 2017-02-22 | 珠海市魅族科技有限公司 | 一种信息详情页面的展示方法及装置 |
CN107728868A (zh) * | 2016-08-11 | 2018-02-23 | 阿里巴巴集团控股有限公司 | 同步移动页面中的组件的方法、装置和移动终端 |
CN112667127A (zh) * | 2020-12-23 | 2021-04-16 | 北京字节跳动网络技术有限公司 | 书籍信息显示方法、装置、计算机设备及可读存储介质 |
CN113094009A (zh) * | 2021-03-08 | 2021-07-09 | 联想(北京)有限公司 | 显示方法及显示设备 |
-
2021
- 2021-11-23 CN CN202111394859.1A patent/CN114115650A/zh active Pending
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN107728868A (zh) * | 2016-08-11 | 2018-02-23 | 阿里巴巴集团控股有限公司 | 同步移动页面中的组件的方法、装置和移动终端 |
CN106445341A (zh) * | 2016-09-23 | 2017-02-22 | 珠海市魅族科技有限公司 | 一种信息详情页面的展示方法及装置 |
CN112667127A (zh) * | 2020-12-23 | 2021-04-16 | 北京字节跳动网络技术有限公司 | 书籍信息显示方法、装置、计算机设备及可读存储介质 |
CN113094009A (zh) * | 2021-03-08 | 2021-07-09 | 联想(北京)有限公司 | 显示方法及显示设备 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US9756140B2 (en) | Tracking user behavior relative to a network page | |
US8913082B2 (en) | Information display device, information display method, information display program, recording medium and information display system | |
CN109375973B (zh) | 页面展示方法、装置、计算机设备及计算机可读存储介质 | |
CN107239528B (zh) | 搜索结果显示方法及装置 | |
CN102508573B (zh) | 一种通过滑屏实现快速定位的方法及设备 | |
CN111414116B (zh) | 一种信息的显示控制方法、装置、电子设备及存储介质 | |
CN111259284B (zh) | 页面懒加载的方法和装置、存储介质和处理器 | |
CN103279278A (zh) | 一种在终端界面中获取图标详细信息的方法和装置 | |
CN107045414B (zh) | 控制具有触控屏的终端的方法及终端 | |
CN110268377B (zh) | 用于在计算系统中提供用户帮助的装置和方法 | |
CN106527888A (zh) | 滑屏查找页面的方法及装置 | |
CN103034683A (zh) | 用于浏览器的页面切换方法和装置 | |
CN106599263B (zh) | 一种内容筛选方法、系统及用户终端 | |
CN112954442B (zh) | 视频播放方法、装置、设备和存储介质 | |
US10719206B1 (en) | Measuring unresponsive interactions | |
WO2024087892A1 (zh) | 用于内容呈现的方法、装置、设备和存储介质 | |
CN111611502A (zh) | 一种标签页展示方法及装置 | |
CN102681748A (zh) | 一种信息处理设备以及信息处理方法 | |
CN114115649A (zh) | 书籍详情展示方法、电子设备及存储介质 | |
CN110417984B (zh) | 一种在屏幕异形区域实现操作的方法、装置及存储介质 | |
JP2007234015A (ja) | ユーザインタフェース内でナビゲートする方法、およびコンピュータ・プログラム | |
CN114115650A (zh) | 页面展示方法、电子设备及存储介质 | |
US20220179532A1 (en) | Method and device for responding to user operation | |
EP2584449A1 (en) | Information processing apparatus, display control method, and computer program product | |
JP2015022656A (ja) | 電子機器、方法およびプログラム |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination |