[发明专利]基于Ios系统WebView的翻页方法和翻页系统

摘要

本发明提供一种基于Ios系统WebView的翻页方法和翻页系统，翻页系统包括移动端和服务器端；服务器端包括第二接收模块、分页处理模块和推送模块；移动端包括第一接收模块、下载请求模块、容器创建模块、WebView控件创建模块、第一控制模块、预加载模块、向下翻页流程控制模块以及向上翻页流程控制模块。在服务器端采用分页处理，移动端在显示当前页后，只预加载当前页的前一页面以及后一页面的内容，从而既节省了移动端的网络消耗流量，也降低了移动端浏览网页的等待时间，提高了浏览体验；采用3个WebView控件，以平移方式实现流畅的翻页效果，既提高了翻页体验，又具有不占用屏幕空间、操作简单的优点。

主权项

一种基于Ios系统WebView的翻页方法，其特征在于，包括以下步骤：S1，当移动端接收到对某一url网页的兴趣区域的请求消息时，所述移动端通过网络向服务器端发送该网页的下载请求；其中，该下载请求中携带有该网页的兴趣区域信息；S2，所述服务器端在接收到该网页的下载请求时，所述服务器端基于预设分页策略，对所述网页进行分页处理，得到n个连续页面；该连续页面按从前向后顺序依次记为：第1页面、第2页面…第n页面；然后，获得包含所述兴趣区域信息的第i页面；S3，所述服务器端将第i页面以及总页面数n推送到所述移动端；S4，所述移动端创建按自上而下顺序重叠排列的三层容器，分别记为：第一层容器、第二层容器和第三层容器；另外，所述移动端创建三个WebView控件，分别记为：第1WebView控件、第2WebView控件和第3WebView控件；然后，所述移动端将第1WebView控件放置于第一层容器，将第2WebView控件放置于第二层容器以及将第3WebView控件放置于第三层容器；所述移动端调用所述第1WebView控件加载并显示第i页面；S5，所述移动端判断总页面数n是否大于1页，如果是，则执行S6；S6，所述移动端读取当前所显示的页面号i值，并执行以下预加载过程：如果i＝1，则调用所述第2WebView控件预加载第i+1页面；如果1＜i＜n，则调用所述第2WebView控件预加载第i+1页面，且调用所述第3WebView控件预加载第i‑1页面；如果i＝n，则调用所述第3WebView控件预加载第i‑1页面；S7，向下翻页流程：如果当前所显示的第i页面不是最后一个页面，即i≠n，且所述移动端检测到手势向上滑动的动作时，则所述移动端同时移动所述第1WebView控件，使所述第1WebView控件逐渐离开所述第一层容器，即将所述第1WebView控件所加载的第i页面的页面内容逐渐移离出屏幕；并且，随着所述第1WebView控件的移动，位于所述第1WebView控件之下的第2WebView控件逐渐显示出来，由此导致第2WebView控件预加载的第i+1页面的页面内容逐渐移入到屏幕；当所述移动端检测到所述手势向上滑动的动作消失时，所述移动端进一步判断所述手势向上滑动的动作是否达到翻页动作阈值，如果达到，则将所述第2WebView控件移入到第一层容器，即将所述第2WebView控件所预加载的第i+1页面的页面内容完全显示到页面上，第i+1页面即转变为当前页；然后，将所述第1WebView控件移入到第三层容器；将所述第3WebView控件移入到第二层容器，并通过所述第3WebView控件预加载第i+2页面；然后，将位于第一层容器的所述第2WebView控件的名字改记为第1WebView控件，将位于第二层容器的所述第3WebView控件的名字改记为第2WebView控件，将位于第三层容器的所述第1WebView控件的名字改记为第3WebView控件，由此实现了对当前页进行向下翻页的一个流程；向上翻页流程：如果当前所显示的第i页面不是第1个页面，即i≠1，且所述移动端检测到手势向下滑动的动作时，则所述移动端将所述第1WebView控件置于第二层容器，将所述第3WebView控件置于与第一层容器平行且位于第一层容器之外的位置，将所述第2WebView控件置于第三层容器；由于第3WebView控件置于第一层容器之外，则初始时，所述第3WebView控件对第1WebView控件不存在遮挡，第1WebView控件所加载的第i页面的页面内容显示在屏幕上；随着手势向下滑动的动作，逐渐将所述第3WebView控件向第一层容器中移入；并且，随着第3WebView控件的移动，第3WebView控件不断覆盖第1WebView控件，导致第1WebView控件在屏幕上显示的第i页面逐渐消失，而第3WebView控件预加载的第i‑1页面的页面内容逐渐移进屏幕；当所述移动端检测到所述手势向下滑动的动作消失时，所述移动端进一步判断所述手势向下滑动的动作是否达到翻页动作阈值，如果达到，则将所述第3WebView控件移入到第一层容器，即将所述第3WebView控件所预加载的第i‑1页面的页面内容完全显示到页面上，第i‑1页面即转变为当前页；然后，将所述第1WebView控件移入到第二层容器；将所述第2WebView控件移入到第三层容器，并通过所述第2WebView控件预加载第i‑2页面；然后，将位于第一层容器的所述第3WebView控件的名字改记为第1WebView控件，将位于第二层容器的所述第1WebView控件的名字改记为第2WebView控件，将位于第三层容器的所述第2WebView控件的名字改记为第3WebView控件，由此实现了对当前页进行向上翻页的一个流程；其中，S1中，所述该网页的兴趣区域信息包括：兴趣词或该兴趣区域在该网页的位置百分比信息；其中，S2中，所述预设分页策略通过以下方法获得：综合考虑被请求下载的网页大小、移动端的当前网速情况以及移动端显示屏幕大小，得到所述预设分页策略；其中，S7中，在向下翻页流程中，在将所述第1WebView控件所加载的第i页面的页面内容逐渐移离出屏幕时，仍然显示在屏幕上的第i页面的页面内容增加有特殊视觉效果图案；在向上翻页流程中，在第1WebView控件在屏幕上显示的第i页面逐渐消失的过程中，第1WebView控件在屏幕上显示的尚未消失的第i页面内容增加有特殊视觉效果图案。