一种小程序轮播分页方法

技术领域

本申请涉及移动互联技术领域，特别涉及一种小程序轮播分页方法。

背景技术

轮播图是当前比较常见的一种banner(横幅)形式，其应用广泛，轮播图可以左右滑动，点击指示点切换内容。小程序提供了swiper滑块视图容器，其中只可放置swiper-item组件。

但是，小程序提供的swiper中不支持分页，需要一次加载全部元素。当轮播中元素数量很多的时候，会出现性能问题导致页面渲染很慢，例如一次性加载100个以上元素，低端手机会出现卡顿情况甚至黑屏。

因此，急需发明一种加快页面渲染效率的小程序轮播分页方法。

需要说明的是，在上述背景技术部分公开的信息仅用于加强对本申请的背景的理解，因此可以包括不构成本领域普通技术人员已知的现有技术的信息。

发明内容

鉴于以上技术问题中的至少一项，本申请提供一种小程序轮播分页方法。

根据本申请的一个方面，提供一种小程序轮播分页方法，其特征在于，包括以下步骤：

S1.在请求页面轮播的所有数据List中，对List进行分页渲染，固定分页渲染数据swiperList；

S2.去初始化swiperList，获取用户上一次加载页面的数据，用户直接进入上一次加载页面，且上一次加载页面的数据包括于分页渲染数据swiperList中；

S3.维护一个数据map，在网络请求成功后，在map中保存对应页的数据，用户点击任何一页，清空旧List，判断map中有没有新List未更新页面的数据，若有，新List从map中调用出未更新页面的数据，再去请求更新页面的数据，同时，在map中保存更新后对应页的数据。

在一种实现方式中，步骤S1中，在分页渲染数据swiperList中固定三个swiper-item数据，在左滑或右滑过程中，分页渲染数据swiperList向左或向右进行数据替换，始终保持三个swiper-item数据。

在一种实现方式中，当分页渲染数据swiperList的第一个swiper-item为List的第一页数据时，此时，向左滑动，分页渲染数据swiperList无法向左进行数据替换，当分页渲染数据swiperList的第三个swiper-item为List的最后一页数据时，此时，向右滑动，分页渲染数据swiperList无法向右进行数据替换。

在一种实现方式中，步骤S2中，若用户是第一次加载页面数据，用户加载任何一页的数据，且用户所加载页面的数据包括于分页渲染数据swiperList中。

本申请具有如下技术效果：

本申请通过轮播分页的方式，无需一次性加载请求页面轮播的所有数据List的所有swipier-item，只需要加载分页渲染数据swiperList的3个swiper-item数据，且数量保持不变，不论如何滑动和切换，都不改变分页渲染数据swiperList的数据数量，从而大大地提升了页面加载渲染效率。

下面结合附图与实施例，对本申请进一步说明。

附图说明

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

图1是本申请的原理流程图。

具体实施方式

为使本申请的上述目的、特征和优点能够更加明显易懂，下面结合附图对本申请的具体实施方式做详细的说明。在下面的描述中阐述了很多具体细节以便于充分理解本申请。但是本申请能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本申请内涵的情况下做类似改进，因此本申请不受下面公开的具体实施例的限制。

在本申请的描述中，需要理解的是，术语“左”、“右”等指示方向为基于用户操作小程序的习惯动作，仅是为了便于描述本申请和简化描述，而不是指必须具有特定的方位、以特定的方位操作，因此不能理解为对本申请的限制。

在本申请的一个实施例中，如图1所示，提供一种小程序轮播分页方法，其包括以下步骤：

S1.在请求页面轮播的所有数据List中，对List进行分页渲染，固定分页渲染数据swiperList。swiper-item数据的个数根据实际页面加载情况而定，若一个页面加载速度较快，则swiper-item数据的个数可以设置10-20个，若一个页面加载速度较慢，则swiper-item数据的个数可以设置3-9个。在本实施例中，在分页渲染数据swiperList中固定3个swiper-item数据。

在左滑或右滑过程中，分页渲染数据swiperList向左或向右进行数据替换，始终保持3个swiper-item数据。特别地，当分页渲染数据swiperList的第一个swiper-item为List的第一页数据时，此时，向左滑动，分页渲染数据swiperList无法向左进行数据替换，左滑会反弹回去；当分页渲染数据swiperList的第3个swiper-item为List的最后一页数据时，此时，向右滑动，分页渲染数据swiperList无法向右进行数据替换，右滑会反弹回去。

S2.去初始化swiperList，获取用户上一次加载页面的数据，用户直接进入上一次加载页面，而不是list中的第一页面数据，且上一次加载页面的数据包括于分页渲染数据swiperList中，进一步地，该加载页面的数据为分页渲染数据swiperList三个数据当中的中间数据最佳。保证用户进入当前页的同时，分页渲染数据swiperList加载上一页和下一页的数据。但是当用户滑动的特别快的时候，滑动请求了网络，还没有成功，就继续左滑或右滑了，那就需要限制用户的滑动，提示用户，数据正在加载中。

在步骤S2中，若用户是第一次加载页面数据，用户加载任何一页的数据，且用户所加载页面的数据包括于分页渲染数据swiperList中，进一步地，该加载页面的数据为分页渲染数据swiperList三个数据当中的中间数据最佳。

S3.维护一个数据map，在网络请求成功后，在map中保存对应页的数据，用户点击任何一页，清空旧List，判断map中有没有新List未更新页面的数据，若有，新List从map中调用出未更新页面的数据，再去请求更新页面的数据，同时，在map中保存更新后对应页的数据。

以下将对本申请的具体过程作进一步的描述：

当请求页面轮播的所有数据List具有200个页面数据且用户为老用户时，用户上一次加载页面的数据为第82个页面数据，此时，分页渲染数据swiperList包括第81个页面数据、第82个页面数据和第83个页面数据，且第81个页面数据、第82个页面数据和第83个页面数据等3个页面数据均已加载渲染；

用户点击进入已加载渲染好的第82个页面数据，查看第82个页面数据，与此同时，清空旧List，当第81个页面数据、第100个页面数据发生更新时，新List从map中调用出第1-80个页面数据、第82-99个页面数据、第101-200个页面数据，请求发生更新的第81个页面数据、第100个页面数据；

此时，分页渲染数据swiperList的第81个页面数据、第82个页面数据和第83个页面数据等3个页面数据均再次加载渲染；

用户向左滑动，进入已加载渲染好的第81个页面数据，此时，分页渲染数据swiperList包括第80个页面数据、第81个页面数据和第82个页面数据；与此同时，清空旧List，当第121个页面数据发生更新时，新List从map中调用出第1-120个页面数据、第122-200个页面数据，而分页渲染数据swiperList无需再次加载渲染。

以上所述，仅是本申请的较佳实施例而已，并非对本申请作任何形式上的限制。任何熟悉本领域的技术人员，在不脱离本申请技术方案范围情况下，都可利用上述揭示的方法和技术内容对本申请技术方案做出许多可能的变动和修饰，或修改为等同变化的等效实施例。故凡是未脱离本申请技术方案的内容，依据本申请之形状、构造及原理所作的等效变化，均应涵盖于本申请的保护范围内。