CN109799945A - 小程序长列表滚动显示方法、装置、电子设备及存储介质 - Google Patents

Abstract

本公开提供一种小程序长列表滚动显示的方法、装置、电子设备及存储介质，所述方法包括：接收触控指令，激活所述小程序；通过页面滚动容器对所述小程序的页面进行初始化参数设置；接收手势触控指令，获得触控偏移量值，将所述触控偏移量值与所述初始化参数进行比较，根据比较结果执行相应的长列表滚动指令。本公开实施例通过对小程序长列表滚动显示方法进行改进，使得小程序能够根据用户的使用对长列表进行滚动显示，满足了小程序大数据列表的应用需求，克服了原有组件不能进行滚动显示的技术障碍。

Description

小程序长列表滚动显示方法、装置、电子设备及存储介质

技术领域

本公开涉及计算机技术领域，具体为一种小程序长列表滚动显示方法、装置、电子设备及存储介质。

背景技术

随着移动互联网的发展，小程序应用的规模越来越大，一些小程序不仅需要满足客户的基本应用需求，还需要有更加人性化的交互方式，一些小程序具有无限刷新的列表，例如电商和贴吧类的小程序，但是无限刷新的列表会在小程序中造成严重的性能问题，甚至会崩溃等，造成这个的主要原因是页面元素过多，所以需要有一种能够限制小程序页面元素的长列表滚动显示的优化方案，但是目前并没有这样的解决方案，所以急需一种能够实现小程序列表滚动显示的技术方案，以带给用户以更好的体验。

因此，对于传统的小程序应用进行技术改进，使其具有更加便捷的交互界面从而提高小程序的使用体验，就成为一个特别急迫的技术问题。

发明内容

本公开的目的在于提供一种小程序长列表滚动显示方法、装置、电子设备及存储介质，能够实现小程序列表滚动显示的技术效果。

根据本公开的实施方式，第一方面，本公开提供一种小程序长列表滚动显示的方法，包括：

接收触控指令，激活所述小程序；

通过页面滚动容器对所述小程序的页面进行初始化参数设置；

接收手势触控指令，获得触控偏移量值，将所述触控偏移量值与所述初始化参数进行比较，根据比较结果执行相应的长列表滚动指令。

可选的，所述通过页面滚动容器对所述小程序的页面进行初始化参数设置，包括：

设置所述滚动容器的位置属性、尺寸属性、溢出属性和/或触控回调函数；

设置列表变量，根据起始列表数据渲染所述列表变量获得初始化列表；

设置列表容器的区域参数和边界参数。

可选的，所述接收手势触控指令，获得触控偏移量值，将所述触控偏移量值与所述初始化参数进行比较，根据比较结果执行相应的长列表滚动指令，包括：

接收手势触控指令，根据触控起始回调函数和触控位移回调函数获得触控偏移量值；

比较所述触控偏移量值与所述初始化参数，根据比较结果执行相应的长列表滚动指令。

可选的，所述比较所述触控偏移量值与所述初始化参数，根据比较结果执行相应的长列表滚动指令，包括：

根据所述触控偏移量值的正负，确定长列表的滚动方向；

根据所述列表容器的区域参数和所述列表容器的边界参数关系确定所述长列表是否滚动到所述长列表边界；

当所述长列表滚动到所述长列表边界时，停止滚动。

可选的，所述根据所述触控偏移量值的正负，确定长列表的滚动方向，包括：

所述触控偏移量值为负时，所述长列表向上滚动；

所述触控偏移量值为正时，所述长列表向下滚动。

可选的，所述根据所述列表容器的区域参数和所述列表容器的边界参数关系确定所述长列表是否滚动到所述长列表边界，包括：

从长列表最后一项起获得每一项元素的下边界坐标值；

重复计算所述下边界坐标值与所述列表容器的区域参数的差值是否小于零；

直到所述差值不小于零，记录所述元素的下边界坐标值；

根据所述下边界坐标值确定所述长列表是否滚动到所述长列表边界。

可选的，所述根据所述下边界坐标值确定所述长列表是否滚动到所述长列表边界，包括：

当所述下边界坐标值不大于零时，确定所述长列表滚动到所述长列表的下边界；

当所述下边界坐标值大于零时，判断所述元素在所述长列表中是否存在下一项元素；

若不存在，则所述元素为下边界元素，确定所述长列表滚动到所述长列表的下边界；

若存在，则将所述下一项元素插入到所述长列表的尾部，确定滚动到所述长列表的下边界。

可选的，所述根据所述列表容器的区域参数和所述列表容器的边界参数关系确定所述长列表是否滚动到所述长列表边界，包括：

从长列表第一项起获得每一项元素的上边界坐标值；

重复计算所述上边界坐标值与所述列表容器的区域参数的差值是否小于零；

直到所述差值不小于零，记录所述元素的上边界坐标值；

根据所述上边界坐标值确定所述长列表是否滚动到所述长列表边界。

可选的，所述根据所述上边界坐标值确定所述长列表是否滚动到所述长列表边界，包括：

当所述上边界坐标值不大于零时，确定所述长列表滚动到所述长列表的上边界；

当所述上边界坐标值大于零时，判断所述元素在所述长列表中是否存在上一项元素；

若不存在，则所述元素为上边界元素，确定所述长列表滚动到所述长列表的上边界；

若存在，则将所述上一项元素插入到所述长列表首部，确定所述长列表滚动到所述长列表的上边界。

根据本公开的实施方式，第二方面，本公开提供一种小程序长列表滚动显示的装置，包括：

激活单元，用于接收触控指令，激活所述小程序；

初始化单元，用于通过页面滚动容器对所述小程序的页面进行初始化参数设置；

滚动单元，用于接收手势触控指令，获得触控偏移量值，将所述触控偏移量值与所述初始化参数进行比较，根据比较结果执行相应的长列表滚动指令。

根据本公开的实施方式，第三方面，本公开提供一种电子设备，包括处理器和存储器，所述存储器存储有能够被所述处理器执行的计算机程序指令，所述处理器执行所述计算机程序指令时，实现第一方面任一所述的方法步骤。

根据本公开的实施方式，第四方面，本公开提供一种计算机可读存储介质，存储有计算机程序指令，所述计算机程序指令在被处理器调用和执行时实现第一方面任一所述的方法步骤。

与现有技术相比，本公开实施例的有益效果是：

本公开实施例通过对小程序长列表滚动显示方法进行改进，使得小程序能够根据用户的使用对长列表进行滚动显示，满足了小程序大数据列表的应用需求，克服了原有组件不能进行滚动显示的技术障碍。增强了用户体验，从而使得小程序不仅在使用功能上满足了用户需求，而且在手势体验上更加人性化，提升了小程序的应用价值。

附图说明

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

图1为本公开实施例提供的小程序长列表滚动显示方法流程示意图；

图2为本公开实施例提供的小程序长列表滚动显示方法执行流程示意图；

图3(a)为本公开实施例提供的小程序长列表滚动显示装置的结构示意图；

图3(b)为本公开实施例提供的小程序长列表滚动显示装置的滚动单元结构示意图；

图3(c)为本公开实施例提供的小程序长列表滚动显示装置的初始化单元结构示意图；

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

具体实施方式

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

在本公开实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本公开。在本公开实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义，“多种”一般包含至少两种，但是不排除包含至少一种的情况。

应当理解，本文中使用的术语“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。

应当理解，尽管在本公开实施例中可能采用术语第一、第二、第三等来描述技术名称，但这些技术名称不应限于这些术语。这些术语仅用来将技术名称区分开。例如，在不脱离本公开实施例范围的情况下，第一校验签名也可以被称为第二校验签名，类似地，第二校验签名也可以被称为第一校验签名。

取决于语境，如在此所使用的词语“如果”、“若”可以被解释成为“在……时”或“当……时”或“响应于确定”或“响应于检测”。类似地，取决于语境，短语“如果确定”或“如果检测(陈述的条件或事件)”可以被解释成为“当确定时”或“响应于确定”或“当检测(陈述的条件或事件)时”或“响应于检测(陈述的条件或事件)”。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的商品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种商品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的商品或者系统中还存在另外的相同要素。

另外，下述各实施例中的步骤时序仅为一种举例，而非严格限定。

请参阅图1，根据本公开的实施方式，第一方面，本公开提供一种小程序长列表滚动显示的方法，包括：

步骤S102：接收触控指令，激活所述小程序；

该激活可以为任何一种常规的激活方式，包括但不限于鼠标单击、双击，手指的触控单击、双击等，对触控指令的方式不做具体的限制。在小程序中，设置modalOpen标志位，默认赋值为false，用来代表弹窗的打开和关闭状态。

步骤S104：通过页面滚动容器对小程序页面进行初始化参数设置；

优选的，所述通过页面滚动容器对小程序页面进行初始化参数设置，包括：

步骤S1042：设置所述滚动容器的位置属性、尺寸属性、溢出属性和/或触控回调函数；

具体的示例如下：

将需要被切换的页面，放入容器的可视化标签中，将容器的样式的位置属性，设置为可见，这样容器会根据可显示区域的左上角为坐标系定位；尺寸属性如宽度和高度设为100％，这样页面就会填满整个容器；溢出值设置为“隐藏”，这样容器内容超出的部分就会看不见，并且不影响容器的实际大小。同时容器设置触控起始，触控移动，触控终止，触控取消等触控回调函数。

步骤S1044：设置列表变量参数，并根据初始列表数据渲染所述初始化列表变量从而形成初始化列表；

具体的示例如下：

初始化变量renderList为空数组，该变量用于储存用来显示的列表项的身份信息id，该变量决定了要显示哪些列表项。假设变量originList为数组，是用户用于储存所有列表项数据的数组，每一项都需要有id的属性。开发者可以从originList中选出几项到renderList中，这样就有了初始的列表。利用小程序的列表渲染，根据renderList中每项的id，从originList中获得原有的列表项数据，然后根据这些数据渲染出列表，其中模板中的id需要绑定数据项的id。

步骤S1046：设置列表容器的区域参数和列表容器的边界参数。

具体的示例如下：

初始化容器顶部变量renderTop为0，设置列表容器的样式的，元素顶部到容器顶部距离top属性为renderTop个像素px，例如，renderTop为0，则top属性为0px，该属性的作用是，决定列表容器距离显示区域y轴的距离，从而实现滚动的效果。

通过小程序选择器对象(createSelectorQuery)获得选择对象(SelectorQuery)实例，再调用选择对象的选择视窗(selectViewport)方法，获得视窗对象，再通过视窗对象的矩形边距信息(boundingClientRect)，获得视窗的高度属性，将其值存入到视窗高度变量(viewPortHeight)中。该变量主要储存，小程序可现实区域的高度。

步骤S106：接收手势触控指令，并与所述初始化参数进行比较，根据比较结果执行相应的长列表滚动指令。

优选的，所述接收手势触控指令，并与所述初始化参数进行比较，根据比较结果执行相应的长列表滚动指令，包括：

步骤S1062：接收手势触控指令，并根据触控起始回调函数和触控位移回调函数确定触控偏移量值；

具体的示例如下：

在触控起始回调函数中，从传入的数据的Y轴触控clienY属性，获得当前的手指的纵坐标，储存在Y起始变量startY中。

在触控移动回调函数中，从传入的数据的Y轴触控clienY属性，获得当前的手指的纵坐标，储存在Y移动变量moveY中，同时，将startY减去moveY，存入到Y轴偏移量offsetY中，然后进行下一步，实现滚动中优化。

步骤S1064：根据所述触控偏移量值与所述初始化参数进行比较，根据比较结果执行相应的长列表滚动指令。

所述步骤S1064，包括：

步骤S10642：根据所述触控偏移量值的正负，确定长列表的滚动方向；

具体的，所述触控偏移量值为负时，所述长列表向上滚动；所述触控偏移量值为正时，所述长列表向下滚动。

根据Y轴偏移量offsetY的值，如果offsetY大于0，也就是说，用户手指往下滑，则页面就往下滚动，此时进入向下滚动优化逻辑。如果offsetY小于0，即用户手指往上滑，则页面就往上滚动，此时进入向上滚动优化逻辑。

步骤S10644：根据初始化列表的区域参数和列表容器的边界参数关系确定是否滚动到所述长列表边界；

向上滚动：

具体的，所述步骤S10644包括：

步骤S106442：从长列表最后一项起获得每一项元素的下边界坐标值；

步骤S106444：重复计算所述下边界坐标值与所述列表的区域参数的差值是否小于零；

步骤S106446：直到该差值不小于零，记录该元素的下边界值；

步骤S106448：根据该下边界值确定是否滚动到所述长列表边界。

优选的，所述步骤S106448，包括：

步骤S1064482：当该下边界值不大于零时，确定滚动到所述长列表的下边界；

步骤S1064484：当该下边界值大于零时，确定该元素在该长列表中是否存在下一项元素；

步骤S1064486：若不存在，则该元素为下边界元素，确定滚动到所述长列表的下边界；

步骤S1064488：若存在，则将该下一项元素插入到长列表尾部，确定滚动到所述长列表的下边界。

具体的，如图2所示，向上滚动优化逻辑：从长列表变量renderList的第一项起，顺序遍历，根据每一项的身份信息id，通过小程序创建选择器获得选择器对象(SelectorQuery对象)实例，再调用选择器对象的选择select方法，获得该id对应的小程序元素对象，再通过小程序元素对象的矩形边距信息(boundingClientRect)方法，得到该元素的底部bottom属性对应的值，存入到下底部变量eleBottom中(节点的下边界坐标)，同时得到高度height属性对应的值，存入到变量节点的高度变量eleHeight中。

将视窗高度变量viewPortHeight减去节点的高度变量eleBottom，如果小于零，则代表节点不在显示区域，并且在显示区域的上部分，则此时将该节点的id从长列表变量renderList中除去，并将renderTop设置为eleHeight-offsetY，这样小程序会根据renderTop，使得列表向上滚动，同时抵消了去除一项显示的列表所带来的影响。

如果大于零，则代表节点在显示区域，直接退出循环。同时，取得renderList的最后一项的id，同样的步骤取得eleBottom的值，如果eleBottom大于等于零，则说明最后一项已经全部显示在可视区域，列表已经到底，此时根据该项的id，在originList中，取得该id的下一项，如果其存在，则插入到renderList的末尾，这样就实现了列表向下加载，否则无操作；如果eleBottom小于零，则无操作。

所述步骤S10644还包括：

向下滚动：

步骤S106441：从长列表第一项起获得每一项元素的上边界坐标值；

步骤S106443：重复计算所述上边界坐标值与所述列表的区域参数的差值是否小于零；

步骤S106445：直到该差值不小于零，记录该元素的上边界值；

步骤S106447：根据该上边界值确定是否滚动到所述长列表边界。

优选的，所述步骤S106447，包括：

步骤S1064471：当该上边界值不大于零时，确定滚动到所述长列表的上边界；

步骤S1064473：当该上边界值大于零时，确定该元素在该长列表中是否存在上一项元素；

步骤S1064475：若不存在，则该元素为上边界元素，确定滚动到所述长列表的上边界；

步骤S1064477：若存在，则将该上一项元素插入到长列表首部，确定滚动到所述长列表的上边界。

具体的，如图2所示，向下滚动优化逻辑：从长列表renderList的第最后一项起，逆序遍历，根据每一项的身份信息id，通过小程序创建选择器获得选择器对象实例，再调用选择器对象的选择方法，获得该id对应的小程序元素对象，再通过小程序元素对象的矩形边距信息，得到该元素的顶部top属性对应的值，存入到顶部变量eleTop中(节点的上边界坐标)。将视窗高度变量viewPortHeight减去eleTop，如果小于零，则代表节点不在显示区域，并且在显示区域的下部分，则此时将该节点的身份信息id从长列表renderList中除去，并将renderTop设置为offsetY，这样小程序会根据renderTop，使得列表向上滚动。如果大于零，则代表节点在显示区域，直接退出循环。同时，取得长列表renderList的第一项的身份信息id，同样的步骤取得顶部变量eleTop的值，如果顶部变量eleTop大于等于零，则说明第一项已经全部显示在可视区域，列表已经到顶，此时根据该项的id，在原始列表originList中，取得该id的上一项，如果其存在则插入到长列表renderList的首部，这样就实现了列表向上加载，否则无操作。如果顶部变量eleTop小于零，则无操作。

步骤S10646：当确定滚动到所述长列表边界时，停止滚动。

本公开实施例通过对小程序长列表滚动显示方法进行改进，使得小程序能够根据用户的使用对长列表进行滚动显示，满足了小程序大数据列表的应用需求，克服了原有组件不能进行滚动显示的技术障碍。增强了用户体验，从而使得小程序不仅在使用功能上满足了用户需求，而且在手势体验上更加人性化，提升了小程序的应用价值。

根据本公开的实施方式，第二方面，如图3(a)所示，本公开提供一种小程序长列表滚动显示的装置，包括：激活单元302、初始化单元304、滚动单元306。

激活单元302，用于接收触控指令，激活所述小程序。

该激活可以为任何一种常规的激活方式，包括但不限于鼠标单击、双击，手指的触控单击、双击等，对触控指令的方式不做具体的限制。在小程序中，设置modalOpen标志位，默认赋值为false，用来代表弹窗的打开和关闭状态。

初始化单元304，用于通过页面滚动容器对小程序页面进行初始化参数设置。

如图3(b)所示，初始化单元304还包括：

滚动容器初始化单元3042：将需要滚动的页面，放入滚动容器的可视化标签中，预设所述滚动容器的位置属性、尺寸属性、溢出属性和/或触控回调函数；

具体的示例如下：

将需要被切换的页面，放入容器的可视化标签中，将容器的样式的位置属性，设置为可见，这样容器会根据可显示区域的左上角为坐标系定位；尺寸属性如宽度和高度设为100％，这样页面就会填满整个容器；溢出值设置为“隐藏”，这样容器内容超出的部分就会看不见，并且不影响容器的实际大小。同时容器设置触控起始，触控移动，触控终止，触控取消等触控回调函数。

列表初始化单元3044：设置列表变量参数，并根据初始列表数据渲染所述初始化列表变量从而形成初始化列表；

具体的示例如下：

初始化变量renderList为空数组，该变量用于储存用来显示的列表项的身份信息id，该变量决定了要显示哪些列表项。假设变量originList为数组，是用户用于储存所有列表项数据的数组，每一项都需要有id的属性。开发者可以从originList中选出几项到renderList中，这样就有了初始的列表。利用小程序的列表渲染，根据renderList中每项的id，从originList中获得原有的列表项数据，然后根据这些数据渲染出列表，其中模板中的id需要绑定数据项的id。

区域初始化单元3046：设置列表容器的区域参数和列表容器的边界参数。

具体的示例如下：

初始化renderTop为0，设置列表容器的样式的，top属性为renderTop个px，例如，renderTop为0，则top属性为0px，该属性的作用是，决定列表容器距离显示区域y轴的距离，从而实现滚动的效果。

通过小程序createSelectorQuery()获得SelectorQuery对象实例，再调用SelectorQuery对象的selectViewport方法，获得视窗对象，再通过视窗对象的boundingClientRect方法，获得视窗的高度属性，将其值存入到变量viewPortHeight中。该变量主要储存，小程序可现实区域的高度。

滚动单元306，用于接收手势触控指令，并与所述初始化参数进行比较，根据比较结果执行相应的长列表滚动指令。具体包括：

优选的，如图3(c)所示，偏移量值确定单元3062，用于接收手势触控指令，并根据触控起始回调函数和触控位移回调函数确定触控偏移量值；

具体的示例如下：

在触控起始回调函数中，从传入的数据的Y轴触控clienY属性，获得当前的手指的纵坐标，储存在Y起始变量startY中。

在触控移动回调函数中，从传入的数据的Y轴触控clienY属性，获得当前的手指的纵坐标，储存在Y移动变量moveY中，同时，将startY减去moveY，存入到Y轴偏移量offsetY中，然后进行下一步，实现滚动中优化。

比较单元3064：根据所述触控偏移量值与所述初始化参数进行比较，根据比较结果执行相应的长列表滚动指令。具体的，包括：

根据所述触控偏移量值的正负，确定长列表的滚动方向；

具体的，所述触控偏移量值为负时，所述长列表向上滚动；所述触控偏移量值为正时，所述长列表向下滚动。

根据Y轴偏移量offsetY的值，如果offsetY大于0，也就是说，用户手指往下滑，则页面就往下滚动，此时进入向下滚动优化逻辑。如果offsetY小于0，即用户手指往上滑，则页面就往上滚动，此时进入向上滚动优化逻辑。

根据初始化列表的区域参数和列表容器的边界参数关系确定是否滚动到所述长列表边界；

向上滚动：

长列表最后一项起获得每一项元素的下边界坐标值；

重复计算所述下边界坐标值与所述列表的区域参数的差值是否小于零；

直到该差值不小于零，记录该元素的下边界值；

根据该下边界值确定是否滚动到所述长列表边界。

优选的，所述根据该下边界值确定是否滚动到所述长列表边界，包括：

当该下边界值不大于零时，确定滚动到所述长列表的下边界；

当该下边界值大于零时，确定该元素在该长列表中是否存在下一项元素；

若不存在，则该元素为下边界元素，确定滚动到所述长列表的下边界；

若存在，则将该下一项元素插入到长列表尾部，确定滚动到所述长列表的下边界。

具体的，如图2所示，向上滚动优化逻辑：从长列表renderList的第一项起，顺序遍历，根据每一项的身份信息id，通过小程序createSelectorQuery()获得SelectorQuery对象实例，再调用SelectorQuery对象的select方法，获得该id对应的小程序元素对象，再通过小程序元素对象的boundingClientRect方法，得到该元素的底部bottom属性对应的值，存入到下底部变量eleBottom中(节点的下边界坐标)，同时得到高度height属性对应的值，存入到变量节点的高度eleHeight中。

将viewPortHeight减去eleBottom，如果小于零，则代表节点不在显示区域，并且在显示区域的上部分，则此时将该节点的id从renderList中除去，并将renderTop设置为eleHeight-offsetY，这样小程序会根据renderTop，使得列表向上滚动，同时抵消了去除一项显示的列表所带来的影响。

如果大于零，则代表节点在显示区域，直接退出循环。同时，取得renderList的最后一项的id，同样的步骤取得eleBottom的值，如果eleBottom大于等于零，则说明最后一项已经全部显示在可视区域，列表已经到底，此时根据该项的id，在originList中，取得该id的下一项，如果其存在，则插入到renderList的末尾，这样就实现了列表向下加载，否则无操作；如果eleBottom小于零，则无操作。

向下滚动：

从长列表第一项起获得每一项元素的上边界坐标值；

重复计算所述上边界坐标值与所述列表的区域参数的差值是否小于零；

直到该差值不小于零，记录该元素的上边界值；

根据该上边界值确定是否滚动到所述长列表边界。

优选的，所述根据该上边界值确定是否滚动到所述长列表边界，包括：

当该上边界值不大于零时，确定滚动到所述长列表的上边界；

当该上边界值大于零时，确定该元素在该长列表中是否存在上一项元素；

若不存在，则该元素为上边界元素，确定滚动到所述长列表的上边界；

若存在，则将该上一项元素插入到长列表首部，确定滚动到所述长列表的上边界。

具体的，如图2所示，向下滚动优化逻辑：从长列表renderList的第最后一项起，逆序遍历，根据每一项的身份信息id，通过小程序createSelectorQuery()获得SelectorQuery对象实例，再调用SelectorQuery对象的select方法，获得该id对应的小程序元素对象，再通过小程序元素对象的boundingClientRect方法，得到该元素的顶部top属性对应的值，存入到顶部变量eleTop中(节点的上边界坐标)。将viewPortHeight减去eleTop，如果小于零，则代表节点不在显示区域，并且在显示区域的下部分，则此时将该节点的身份信息id从长列表renderList中除去，并将renderTop设置为offsetY，这样小程序会根据renderTop，使得列表向上滚动。如果大于零，则代表节点在显示区域，直接退出循环。同时，取得长列表renderList的第一项的身份信息id，同样的步骤取得顶部变量eleTop的值，如果顶部变量eleTop大于等于零，则说明第一项已经全部显示在可视区域，列表已经到顶，此时根据该项的id，在原始列表originList中，取得该id的上一项，如果其存在则插入到长列表renderList的首部，这样就实现了列表向上加载，否则无操作。如果顶部变量eleTop小于零，则无操作。

当确定滚动到所述长列表边界时，停止滚动。

本公开实施例通过对小程序长列表滚动显示方法进行改进，使得小程序能够根据用户的使用对长列表进行滚动显示，满足了小程序大数据列表的应用需求，克服了原有组件不能进行滚动显示的技术障碍。增强了用户体验，从而使得小程序不仅在使用功能上满足了用户需求，而且在手势体验上更加人性化，提升了小程序的应用价值。

根据本公开的实施方式，第三方面，本公开提供一种电子设备，包括处理器和存储器，所述存储器存储有能够被所述处理器执行的计算机程序指令，所述处理器执行所述计算机程序指令时，实现第一方面任一所述的方法步骤。

根据本公开的实施方式，第四方面，本公开提供一种计算机可读存储介质，其特征在于，存储有计算机程序指令，所述计算机程序指令在被处理器调用和执行时实现第一方面任一所述的方法步骤。

下面参考图4，其示出了适于用来实现本公开实施例的电子设备400的结构示意图。本公开实施例中的终端设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图4示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图4所示，电子设备400可以包括处理装置(例如中央处理器、图形处理器等)401，其可以根据存储在只读存储器(ROM)402中的程序或者从存储装置408加载到随机访问存储器(RAM)403中的程序而执行各种适当的动作和处理。在RAM 403中，还存储有电子设备400操作所需的各种程序和数据。处理装置401、ROM 402以及RAM 403通过总线404彼此相连。输入/输出(I/O)接口405也连接至总线404。

通常，以下装置可以连接至I/O接口405：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置406；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置407；包括例如磁带、硬盘等的存储装置408；以及通信装置409。通信装置409可以允许电子设备400与其他设备进行无线或有线通信以交换数据。虽然图4示出了具有各种装置的电子设备400，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置409从网络上被下载和安装，或者从存储装置408被安装，或者从ROM 402被安装。在该计算机程序被处理装置401执行时，执行本公开实施例的方法中限定的上述功能。

需要说明的是，本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(射频)等等，或者上述的任意合适的组合。

上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。

上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：获取至少两个网际协议地址；向节点评价设备发送包括所述至少两个网际协议地址的节点评价请求，其中，所述节点评价设备从所述至少两个网际协议地址中，选取网际协议地址并返回；接收所述节点评价设备返回的网际协议地址；其中，所获取的网际协议地址指示内容分发网络中的边缘节点。

或者，上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：接收包括至少两个网际协议地址的节点评价请求；从所述至少两个网际协议地址中，选取网际协议地址；返回选取出的网际协议地址；其中，接收到的网际协议地址指示内容分发网络中的边缘节点。

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

附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，单元的名称在某种情况下并不构成对该单元本身的限定，例如，第一获取单元还可以被描述为“获取至少两个网际协议地址的单元”。

Claims (12)

1.一种小程序长列表滚动显示的方法，其特征在于，包括：

接收触控指令，激活所述小程序；

通过页面滚动容器对所述小程序的页面进行初始化参数设置；

接收手势触控指令，获得触控偏移量值，将所述触控偏移量值与所述初始化参数进行比较，根据比较结果执行相应的长列表滚动指令。

2.根据权利要求1所述的方法，其特征在于，所述通过页面滚动容器对所述小程序的页面进行初始化参数设置，包括：

设置所述滚动容器的位置属性、尺寸属性、溢出属性和/或触控回调函数；

设置列表变量，根据起始列表数据渲染所述列表变量获得初始化列表；

设置列表容器的区域参数和边界参数。

3.根据权利要求2所述的方法，其特征在于，所述接收手势触控指令，获得触控偏移量值，将所述触控偏移量值与所述初始化参数进行比较，根据比较结果执行相应的长列表滚动指令，包括：

接收手势触控指令，根据触控起始回调函数和触控位移回调函数获得触控偏移量值；

比较所述触控偏移量值与所述初始化参数，根据比较结果执行相应的长列表滚动指令。

4.根据权利要求3所述的方法，其特征在于，所述比较所述触控偏移量值与所述初始化参数，根据比较结果执行相应的长列表滚动指令，包括：

根据所述触控偏移量值的正负，确定长列表的滚动方向；

根据所述列表容器的区域参数和所述列表容器的边界参数关系确定所述长列表是否滚动到所述长列表边界；

当所述长列表滚动到所述长列表边界时，停止滚动。

5.根据权利要求4所述的方法，其特征在于，所述根据所述触控偏移量值的正负，确定长列表的滚动方向，包括：

所述触控偏移量值为负时，所述长列表向上滚动；

所述触控偏移量值为正时，所述长列表向下滚动。

6.根据权利要求4或5所述的方法，其特征在于，所述根据所述列表容器的区域参数和所述列表容器的边界参数关系确定所述长列表是否滚动到所述长列表边界，包括：

从长列表最后一项起获得每一项元素的下边界坐标值；

重复计算所述下边界坐标值与所述列表容器的区域参数的差值是否小于零；

直到所述差值不小于零，记录所述元素的下边界坐标值；

根据所述下边界坐标值确定所述长列表是否滚动到所述长列表边界。

7.根据权利要求6所述的方法，其特征在于，所述根据所述下边界坐标值确定所述长列表是否滚动到所述长列表边界，包括：

当所述下边界坐标值不大于零时，确定所述长列表滚动到所述长列表的下边界；

当所述下边界坐标值大于零时，判断所述元素在所述长列表中是否存在下一项元素；

若不存在，则所述元素为下边界元素，确定所述长列表滚动到所述长列表的下边界；

若存在，则将所述下一项元素插入到所述长列表的尾部，确定滚动到所述长列表的下边界。

8.根据权利要求4或5所述的方法，其特征在于，所述根据所述列表容器的区域参数和所述列表容器的边界参数关系确定所述长列表是否滚动到所述长列表边界，包括：

从长列表第一项起获得每一项元素的上边界坐标值；

重复计算所述上边界坐标值与所述列表容器的区域参数的差值是否小于零；

直到所述差值不小于零，记录所述元素的上边界坐标值；

根据所述上边界坐标值确定所述长列表是否滚动到所述长列表边界。

9.根据权利要求8所述的方法，其特征在于，所述根据所述上边界坐标值确定所述长列表是否滚动到所述长列表边界，包括：

当所述上边界坐标值不大于零时，确定所述长列表滚动到所述长列表的上边界；

当所述上边界坐标值大于零时，判断所述元素在所述长列表中是否存在上一项元素；

若不存在，则所述元素为上边界元素，确定所述长列表滚动到所述长列表的上边界；

若存在，则将所述上一项元素插入到所述长列表首部，确定所述长列表滚动到所述长列表的上边界。

10.一种小程序长列表滚动显示的装置，其特征在于，包括：

激活单元，用于接收触控指令，激活所述小程序；

初始化单元，用于通过页面滚动容器对所述小程序的页面进行初始化参数设置；

滚动单元，用于接收手势触控指令，获得触控偏移量值，将所述触控偏移量值与所述初始化参数进行比较，根据比较结果执行相应的长列表滚动指令。

11.一种电子设备，其特征在于，包括处理器和存储器，所述存储器存储有能够被所述处理器执行的计算机程序指令，所述处理器执行所述计算机程序指令时，实现权利要求1-9任一所述的方法步骤。

12.一种计算机可读存储介质，其特征在于，存储有计算机程序指令，所述计算机程序指令在被处理器调用和执行时实现权利要求1-9任一所述的方法步骤。