CN114066576A

CN114066576A - 一种页面展示方法、装置、电子设备及存储介质

Info

Publication number: CN114066576A
Application number: CN202111395135.9A
Authority: CN
Inventors: 王超
Original assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Wodong Tianjun Information Technology Co Ltd
Current assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Wodong Tianjun Information Technology Co Ltd
Priority date: 2021-11-23
Filing date: 2021-11-23
Publication date: 2022-02-18

Abstract

本发明实施例适用于计算机技术领域，提供了一种页面展示方法、装置、电子设备及存储介质，其中，页面展示方法包括：在显示页面中以第一视图模式展示商品列表；显示页面的设定区域展示商品列表中的第一元素；第一元素表征商品列表中的一个商品条目；当接收到切换指令时，基于第一元素的第一索引值确定第一偏移量；第一切换指令用于将商品列表切换至第二视图模式展示；第一索引值表征第一元素在商品列表中的索引；第一元素在第一视图模式与第二视图模式中的展示尺寸不同；第一偏移量表征由第一视图模式切换至第二视图模式时，维持在设定区域展示第一元素所需的商品列表的偏移量；基于第一偏移量，在显示页面中以第二视图模式展示商品列表。

Description

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

技术领域

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

背景技术

购物类应用程序(APP，Application)的商品列表页面包括多张视图模式，用户可以根据需求进行视图模式的切换。相关技术中，用户在APP的商品列表页面进行视图模式的切换时(比如从列表模式切换到大图模式)，由于大图模式下和列表模式下的商品视图的尺寸不同，切换视图模式会导致列表模式和大图模式下屏幕中展示的商品的位置发生变化，比如列表模式下显示的商品在切换到大图模式下后移出了屏幕，影响用户体验。

发明内容

为了解决上述问题，本发明实施例提供了一种页面展示方法、装置、电子设备及存储介质，以至少解决相关技术中商品列表页面在切换视图模式后商品位置发生变化的问题。

本发明的技术方案是这样实现的：

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

上述方案中，所述基于所述第一元素的第一索引值确定第一偏移量，包括：

基于所述第一索引值确定所述第一元素位于所述第二视图模式展示的商品列表中的行数；

基于所述第二视图模式展示的商品列表中的元素的展示尺寸和所述行数，确定所述第一偏移量。

上述方案中，在基于所述第一元素的第一索引值确定第一偏移量之前，所述方法还包括：

确定所述第一视图模式展示的商品列表的第二偏移量；

基于所述第二偏移量和所述第一视图模式展示的商品列表中的元素的展示尺寸，确定所述第一索引值。

上述方案中，所述基于所述第一偏移量，在所述显示页面中以第二视图模式展示所述商品列表，包括：

将所述第二视图模式展示的商品列表的偏移量确定为所述第一偏移量，以使在所述显示页面中以第二视图模式展示所述商品列表。

上述方案中，所述基于所述第一索引值确定所述第一元素位于所述第二视图模式展示的商品列表中的行数，包括：

基于所述第二视图模式展示的商品列表的每一行展示的商品条目的数量，以及所述第一索引值，确定所述第一元素位于所述第二视图模式展示的商品列表中的行数。

上述方案中，所述确定所述第一视图模式展示的商品列表的第二偏移量，包括：

读取设定控件的属性值，得到所述第二偏移量；所述设定控件表征所述显示页面中展示的滚动条。

上述方案中，所述方法还包括：

在所述显示页面初始化商品列表的情况下，重置所述第一索引值。

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

第一展示模块，用于在显示页面中以第一视图模式展示商品列表；其中，所述显示页面的设定区域展示所述商品列表中的第一元素；所述第一元素表征所述商品列表中的一个商品条目；

确定模块，用于当接收到切换指令时，基于所述第一元素的第一索引值确定第一偏移量；所述第一切换指令用于将所述商品列表切换至第二视图模式展示；所述第一索引值表征所述第一元素在所述商品列表中的索引；所述第一元素在第一视图模式与所述第二视图模式中的展示尺寸不同；所述第一偏移量表征由所述第一视图模式切换至所述第二视图模式时，维持在所述设定区域展示所述第一元素所需的商品列表的偏移量；

第二展示模块，用于基于所述第一偏移量，在所述显示页面中以第二视图模式展示所述商品列表。

第三方面，本发明实施例提供了一种电子设备，包括处理器和存储器，所述处理器和存储器相互连接，其中，所述存储器用于存储计算机程序，所述计算机程序包括程序指令，所述处理器被配置用于调用所述程序指令，执行本发明实施例第一方面提供的页面展示方法的步骤。

第四方面，本发明实施例提供了一种计算机可读存储介质，包括：所述计算机可读存储介质存储有计算机程序。所述计算机程序被处理器执行时实现如本发明实施例第一方面提供的页面展示方法的步骤。

本发明实施例通过在显示页面中以第一视图模式展示商品列表，显示页面的设定区域展示商品列表中的第一元素。当接收到切换指令时，基于第一元素的第一索引值确定第一偏移量，基于所述第一偏移量，在显示页面中以第二视图模式展示商品列表。其中，第一元素表征商品列表中的一个商品条目，第一切换指令用于将商品列表切换至第二视图模式展示，第一索引值表征第一元素在商品列表中的索引，第一元素在第一视图模式与第二视图模式中的展示尺寸不同，第一偏移量表征由第一视图模式切换至第二视图模式时，维持在设定区域展示第一元素所需的商品列表的偏移量。本发明实施例可以在切换视图模式之后，实现显示页面中显示的商品条目与切换视图模式之前保持一致，避免用户切换视图模式后浏览不到之前正在浏览的商品，提升用户浏览体验。

附图说明

图1是本发明实施例提供的一种商品列表的示意图；

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

图3是本发明实施例提供的另一种商品列表的示意图；

图4是本发明实施例提供的另一种页面展示方法的实现流程示意图；

图5是本发明实施例提供的另一种商品列表的示意图；

图6是本发明实施例提供的另一种页面展示方法的实现流程示意图；

图7是本发明实施例提供的一种视图模式切换效果的示意图；

图8是本发明实施例提供的另一种视图模式切换效果的示意图；

图9是本发明应用实施例提供的一种视图模式切换的流程示意图；

图10是本发明实施例提供的一种页面展示装置的示意图；

图11是本发明一实施例提供的电子设备的示意图。

具体实施方式

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

用户在APP中通过关键字搜索到相关的商品时，会通过商品列表显示给用户。在商品列表的每个商品条目上通常会有商品图、价格、名称等重要信息。APP中常见的商品列表视图是列表视图模式，其缺点是商品图偏小，为了通过商品图提供给用户更多的信息，一般都会在商品列表页的右上角添加视图模式切换按钮，点击后可以切换到大图视图模式，大图视图模式下商品单元的整体尺寸会变大。

参考图1，图1是本发明实施例提供的一种商品列表的示意图。在用户浏览购物APP的商品列表的场景下，APP默认视图模式为列表视图模式，用户可以滚动视图浏览商品。在滚动视图之后，如果用户点击了切换视图，此时APP的滚动视图会重新刷新视图布局进行显示，从图1中的列表视图模式切换至大图视图模式。由于大图视图模式下和列表视图模式下的每一个商品视图的尺寸不同(大图模式图片更大)，但是滚动视图在Y轴上的偏移量不会变，就会导致APP在列表视图模式和在大图视图模式下屏幕中展示的商品的位置发生变化。列表视图模式下正在浏览的商品可能在大图视图模式下已经移出了屏幕，较为影响用户体验。如图1所示，在切换视图模式后，商品B已经快移出了屏幕。

针对上述相关技术的缺点，本发明实施例提供了一种页面展示方法，能够实现切换视图模式后显示页面展示的商品不发生变化。为了说明本发明所述的技术方案，下面通过具体实施例来进行说明。

图2是本发明实施例提供的一种页面展示方法的实现流程示意图，所述页面展示方法的执行主体为电子设备，电子设备包括台式电脑、笔记本电脑和服务器等。参考图2，页面展示方法包括：

S201，在显示页面中以第一视图模式展示商品列表；其中，所述显示页面的设定区域展示所述商品列表中的第一元素；所述第一元素表征所述商品列表中的一个商品条目。

例如，用户打开购物APP，通过搜索商品或者点击链接进入到商品列表页面。电子设备的显示页面以第一视图模式展示商品列表，第一视图模式可以是如图1所示的列表视图模式和大图视图模式，还可以是其他视图模式。

在显示页面中设置一个设定区域，设定区域可以在显示页面的顶部、底部或中间。确定设定区域中展示的商品列表中的第一元素，获取该第一元素的第一索引值。

这里，第一索引值指第一元素在所述商品列表中的索引。如图3所示，图3是本发明实施例提供的另一种商品列表的示意图。假设设定区域设置在显示页面的最顶部，显示页面以列表视图模式展示商品列表，每一行显示一个商品条目，将第一个商品条目的索引设置为0，其余商品条目的索引按照数字顺序依次加1。则显示页面在未发生滚动的情况下，设定区域中展示的商品条目的索引为0。如果用户滚动了页面视图，如图3所示，将索引为4的商品滚动到了设定区域中。此时，设定区域中显示的第一元素的第一索引值为4。

S202，当接收到切换指令时，基于所述第一元素的第一索引值确定第一偏移量；所述第一切换指令用于将所述商品列表切换至第二视图模式展示；所述第一索引值表征所述第一元素在所述商品列表中的索引；所述第一元素在第一视图模式与所述第二视图模式中的展示尺寸不同；所述第一偏移量表征由所述第一视图模式切换至所述第二视图模式时，维持在所述设定区域展示所述第一元素所需的商品列表的偏移量。

这里，第一偏移量表示在切换视图模式后，如果要使得第一元素依旧维持展示在设定区域中，商品列表应该发生的偏移量。如果第一视图模式中商品列表的偏移量为0，则第一偏移量也为0。

参考图4，在一实施例中，在基于所述第一元素的第一索引值确定第一偏移量之前，所述方法还包括：

S401，确定所述第一视图模式展示的商品列表的第二偏移量。

一般情况下，用户在点击搜索按钮后，显示页面展示的商品列表的第二偏移量为0，但是用户可以滚动商品列表进行浏览，在商品列表发生滚动后，显示页面展示的商品列表的第二偏移量发生了变化。

在一实施例中，所述确定所述第一视图模式展示的商品列表的第二偏移量，包括：

显示页面包括一个滚动条，通过滚动条可以上下浏览商品列表，在商品列表发生滚动后，滚动条的位置也会发生变化。通过读取的滚动条的属性值，可以得到商品列表的第二偏移量。

在实际应用中，在iOS系统中，可以通过scrollView的contentOffset方法获取第二偏移量。

S402，基于所述第二偏移量和所述第一视图模式展示的商品列表中的元素的展示尺寸，确定所述第一索引值。

可以通过第二偏移量和元素的展示尺寸可以计算得到第一索引值，如图5所示，一个元素的展示尺寸为商品单元的高度加上相连商品单元间的间距的高度。因为目前绝大多数APP都是上下滚动视图浏览商品，所以这里元素的展示尺寸主要指元素的高度。确定竖直方向的偏移量(第二偏移量)为offsetY，offsetY除以元素的高度h1，得到的值向上取整减一，就是当前设定区域中显示的第一元素的第一索引值。

在一实施例中，在所述显示页面初始化商品列表的情况下，重置所述第一索引值。

这里，初始化商品列表的情况包括：用户刷新了商品列表、用户重新搜索商品、用户通过链接跳转到其他商品列表等。在初始化商品列表后，商品列表的偏移量为0。

有些显示页面初始化商品列表的情况下，例如用户滚动商品列表浏览商品之后，假设设定区域中第一元素的第一索引值为8，如果此时用户点击了刷新按钮，则当前页面的偏移量重置为0，此时同时需要重置第一索引值。

当接收到切换指令时，显示页面中展示的商品列表的视图模式发生变化，商品列表由第一图模式切换至第二视图模式展示。

这里，用户可以通过触屏操作、按键操作、语音控制等方式触发切换指令。

第一元素在第一视图模式与第二视图模式中的展示尺寸不同，不同商品列表的视图模式的区别在于图片大小、高度、宽度、每一行显示的商品条目的数量。比如，大图视图模式下每一行显示的商品条目为2，列表视图模式下每一行显示的商品条目为1。

在接收到切换指令时，通过第一元素的第一索引值确定第一偏移量，第一偏移量表征由第一视图模式切换至第二视图模式时，维持在设定区域展示第一元素所需的商品列表的偏移量。

参考图6，在一实施例中，所示基于所述第一元素的第一索引值确定第一偏移量，包括：

S601，基于所述第一索引值确定所述第一元素位于所述第二视图模式展示的商品列表中的行数。

每种视图模式下，商品列表每一行所展示的商品条目的数量是已知的，比如，大图视图模式下每一行显示的商品条目为2，列表视图模式下每一行显示的商品条目为1。

通过第二视图模式下商品列表每一行的商品条目的数量和第一索引值，可以确定第一元素位于商品列表的第几行。

在一实施例中，所述基于所述第一索引值确定所述第一元素位于所述第二视图模式展示的商品列表中的行数，包括：

例如，在大图模式下每一行显示的商品条目为2，如果第一索引值为4，默认商品列表的第一个商品索引为0。则可以确定第一元素位于商品列表的第三行。

S602，基于所述第二视图模式展示的商品列表中的元素的展示尺寸和所述行数，确定所述第一偏移量。

例如，第一元素位于商品列表的第三行，可以得知商品列表中第一元素的上面还有2行商品条目，将2乘以第二视图模式展示的商品列表中的元素的展示尺寸，得到第一偏移量。

这里，一个元素的展示尺寸为商品单元的高度加上相连商品单元间的间距的高度。因为目前绝大多数APP都是上下滚动视图浏览商品，所以这里元素的展示尺寸主要指元素的高度。将行数减一，然后乘以元素高度h2，得到第一偏移量。

S203，基于所述第一偏移量，在所述显示页面中以第二视图模式展示所述商品列表。

因为不同视图模式下元素的展示尺寸不同，每个商品视图的高度都发生了变化，可能导致原来显示在屏幕最上面的商品已经不在屏幕内或者不在屏幕最上面。如图7所示，列表模式下索引为4的商品显示在屏幕最顶部，而在切换到大图模式后，索引为4的商品显示在屏幕最下面。

而在本发明实施例中，基于第一偏移量在显示页面中以第二视图模式展示商品列表，可以保证切换视图模式前后在屏幕设定区域中显示的商品一致，提升用户体验。

在一实施例中，所述基于所述第一偏移量，在所述显示页面中以第二视图模式展示所述商品列表，包括：

将第二视图模式展示的商品列表的偏移量确定为第一偏移量，然后在显示页面中以第二视图模式展示商品列表，这样第一元素始终显示在显示页面中用户可以直观观察到的区域。如图8所示，列表模式中索引为4的商品显示在屏幕最顶部，切换至大图模式后如果不修改偏移量，索引为4的商品显示在屏幕最底部。经过本发明实施例纠正偏移量后，索引为4的商品依旧显示在屏幕最顶部，用户的浏览体验不会发生变化。

参考图9，图9是本发明应用实施例提供的一种视图模式切换的流程示意图，视图模式切换流程包括：

首先，用户可以通过在APP中搜索商品名称进入商品列表视图页，默认视图模式为列表视图模式，初始化商品列表的第一个商品的索引为0。

显示页面中设置了一个设定区域，用户可以对视图进行滚动浏览商品列表中的商品，如果用户点击了视图模式切换按钮，计算设定区域中显示的商品的索引。

这里，可以根据列表视图模式展示的商品列表的偏移量和商品单元的高度计算设定区域中显示的商品的索引。

然后，根据设定区域中显示的商品的索引计算大图视图模式展示的商品列表的偏移量，基于计算得到的偏移量在显示页面中以大图视图模式展示商品列表。

用户继续浏览商品列表，如果后续发生滚动和切换，按照上述方案进行视图模式的切换。

本发明应用实施例在进行视图模式的切换时，可以使得设定区域中显示的商品在视图模式切换前后保持一致，避免用户切换模式后看不到之前模式正在浏览的商品，以此提升用户体验。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。

应当理解，当在本说明书和所附权利要求书中使用时，术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。

需要说明的是，本发明实施例所记载的技术方案之间，在不冲突的情况下，可以任意组合。

另外，在本发明实施例中，“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。

参考图10，图10是本发明实施例提供的一种页面展示装置的示意图，如图10所示，该装置包括：第一展示模块、确定模块和第二展示模块。

在一实施例中，所述确定模块基于所述第一元素的第一索引值确定第一偏移量，包括：

在一实施例中，所述装置还包括：

第二偏移量确定模块，用于确定所述第一视图模式展示的商品列表的第二偏移量；

第一索引值确定模块，用于基于所述第二偏移量和所述第一视图模式展示的商品列表中的元素的展示尺寸，确定所述第一索引值。

在一实施例中，所述第二展示模块基于所述第一偏移量，在所述显示页面中以第二视图模式展示所述商品列表，包括：

在一实施例中，所述确定模块基于所述第一索引值确定所述第一元素位于所述第二视图模式展示的商品列表中的行数，包括：

在一实施例中，所述第二偏移量确定模块确定所述第一视图模式展示的商品列表的第二偏移量，包括：

在一实施例中，所述装置还包括：

实际应用时，所述第一展示模块、确定模块和第二展示模块可通过电子设备中的处理器，比如中央处理器(CPU，Central ProcessingUnit)、数字信号处理器(DSP，DigitalSignal Processor)、微控制单元(MCU，MicrocontrollerUnit)或可编程门阵列(FPGA，Field－Programmable GateArray)等实现。

需要说明的是：上述实施例提供的页面展示装置在进行页面展示时，仅以上述各模块的划分进行举例说明，实际应用中，可以根据需要而将上述处理分配由不同的模块完成，即将装置的内部结构划分成不同的模块，以完成以上描述的全部或者部分处理。另外，上述实施例提供的页面展示装置与页面展示方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

基于上述程序模块的硬件实现，且为了实现本申请实施例的方法，本申请实施例还提供了一种电子设备。图11为本申请实施例电子设备的硬件组成结构示意图，如图11所示，电子设备包括：

通信接口，能够与其它设备比如网络设备等进行信息交互；

处理器，与所述通信接口连接，以实现与其它设备进行信息交互，用于运行计算机程序时，执行上述电子设备侧一个或多个技术方案提供的方法。而所述计算机程序存储在存储器上。

当然，实际应用时，电子设备中的各个组件通过总线系统耦合在一起。可理解，总线系统用于实现这些组件之间的连接通信。总线系统除包括数据总线之外，还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见，在图11中将各种总线都标为总线系统。

本申请实施例中的存储器用于存储各种类型的数据以支持电子设备的操作。这些数据的示例包括：用于在电子设备上操作的任何计算机程序。

可以理解，存储器可以是易失性存储器或非易失性存储器，也可包括易失性和非易失性存储器两者。其中，非易失性存储器可以是只读存储器(ROM，Read Only Memory)、可编程只读存储器(PROM，Programmable Read-Only Memory)、可擦除可编程只读存储器(EPROM，Erasable Programmable Read-Only Memory)、电可擦除可编程只读存储器(EEPROM，Electrically Erasable Programmable Read-Only Memory)、磁性随机存取存储器(FRAM，ferromagnetic random access memory)、快闪存储器(FlashMemory)、磁表面存储器、光盘、或只读光盘(CD-ROM，Compact Disc Read-OnlyMemory)；磁表面存储器可以是磁盘存储器或磁带存储器。易失性存储器可以是随机存取存储器(RAM，RandomAccessMemory)，其用作外部高速缓存。通过示例性但不是限制性说明，许多形式的RAM可用，例如静态随机存取存储器(SRAM，Static Random Access Memory)、同步静态随机存取存储器(SSRAM，Synchronous Static RandomAccess Memory)、动态随机存取存储器(DRAM，Dynamic Random Access Memory)、同步动态随机存取存储器(SDRAM，SynchronousDynamic RandomAccess Memory)、双倍数据速率同步动态随机存取存储器(DDRSDRAM，Double Data Rate Synchronous Dynamic RandomAccess Memory)、增强型同步动态随机存取存储器(ESDRAM，Enhanced Synchronous Dynamic RandomAccess Memory)、同步连接动态随机存取存储器(SLDRAM，SyncLink Dynamic RandomAccess Memory)、直接内存总线随机存取存储器(DRRAM，Direct Rambus RandomAccess Memory)。本申请实施例描述的存储器旨在包括但不限于这些和任意其它适合类型的存储器。

上述本申请实施例揭示的方法可以应用于处理器中，或者由处理器实现。处理器可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器可以是通用处理器、DSP，或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。处理器可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者任何常规的处理器等。结合本申请实施例所公开的方法的步骤，可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于存储介质中，该存储介质位于存储器，处理器读取存储器中的程序，结合其硬件完成前述方法的步骤。

可选地，所述处理器执行所述程序时实现本申请实施例的各个方法中由电子设备实现的相应流程，为了简洁，在此不再赘述。

在示例性实施例中，本申请实施例还提供了一种存储介质，即计算机存储介质，具体为计算机可读存储介质，例如包括存储计算机程序的第一存储器，上述计算机程序可由电子设备的处理器执行，以完成前述方法所述步骤。计算机可读存储介质可以是FRAM、ROM、PROM、EPROM、EEPROM、Flash Memory、磁表面存储器、光盘、或CD-ROM等存储器。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置、电子设备和方法，可以通过其它的方式实现。以上所描述的设备实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，如：多个单元或组件可以结合，或可以集成到另一个系统，或一些特征可以忽略，或不执行。另外，所显示或讨论的各组成部分相互之间的耦合、或直接耦合、或通信连接可以是通过一些接口，设备或单元的间接耦合或通信连接，可以是电性的、机械的或其它形式的。

上述作为分离部件说明的单元可以是、或也可以不是物理上分开的，作为单元显示的部件可以是、或也可以不是物理单元，即可以位于一个地方，也可以分布到多个网络单元上；可以根据实际的需要选择其中的部分或全部单元来实现本实施例方案的目的。

另外，在本申请各实施例中的各功能单元可以全部集成在一个处理单元中，也可以是各单元分别单独作为一个单元，也可以两个或两个以上单元集成在一个单元中；上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能单元的形式实现。

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

或者，本申请上述集成的单元如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实施例的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机、服务器、或者网络设备等)执行本申请各个实施例所述方法的全部或部分。而前述的存储介质包括：移动存储设备、ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

需要说明的是，本申请实施例所记载的技术方案之间，在不冲突的情况下，可以任意组合。

另外，在本申请实例中，“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。

以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。

Claims

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

在显示页面中以第一视图模式展示商品列表；其中，所述显示页面的设定区域展示所述商品列表中的第一元素；所述第一元素表征所述商品列表中的一个商品条目；

当接收到切换指令时，基于所述第一元素的第一索引值确定第一偏移量；所述第一切换指令用于将所述商品列表切换至第二视图模式展示；所述第一索引值表征所述第一元素在所述商品列表中的索引；所述第一元素在第一视图模式与所述第二视图模式中的展示尺寸不同；所述第一偏移量表征由所述第一视图模式切换至所述第二视图模式时，维持在所述设定区域展示所述第一元素所需的商品列表的偏移量；

基于所述第一偏移量，在所述显示页面中以第二视图模式展示所述商品列表。

2.根据权利要求1所述的方法，其特征在于，所述基于所述第一元素的第一索引值确定第一偏移量，包括：

3.根据权利要求1所述的方法，其特征在于，在基于所述第一元素的第一索引值确定第一偏移量之前，所述方法还包括：

确定所述第一视图模式展示的商品列表的第二偏移量；

4.根据权利要求1所述的方法，其特征在于，所述基于所述第一偏移量，在所述显示页面中以第二视图模式展示所述商品列表，包括：

5.根据权利要求2所述的方法，其特征在于，所述基于所述第一索引值确定所述第一元素位于所述第二视图模式展示的商品列表中的行数，包括：

6.根据权利要求3所述的方法，其特征在于，所述确定所述第一视图模式展示的商品列表的第二偏移量，包括：

7.根据权利要求1所述的方法，其特征在于，所述方法还包括：

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

9.一种电子设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至7任一项所述的页面展示方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被处理器执行时使所述处理器执行如权利要求1至7任一项所述的页面展示方法。