[发明专利]页面过渡效果实现方法

说明书

本发明涉及网页显示技术，解决了目前通过页面过渡效果无法得知页面打开工作所处阶段，用户难以决定是继续等待还是关闭页面的问题。技术方案为：页面过渡效果实现方法：接收到打开新页面指令后，初始化当前接口访问数量为0，然后显示接口访问过渡页面，并实时监测当前接口访问数量，然后执行打开新页面指令，并实时监听新增的接口请求以及实时监听接口响应，每监听到一个新增的接口请求，当前接口访问数量加1，每监听到一个接口响应，当前接口访问数量减1；若监测到当前接口访问数量由大于0的数变为0，则移除接口访问过渡页面。有益效果是：用户能够通过页面过渡效果知道页面打开工作所处阶段，进而辅助用户决定是继续等待还是关闭页面。

技术领域

本发明涉及网页显示技术，特别涉及在网页跳转时实现过渡效果的技术。

背景技术

在网页跳转过程中，现有技术通过监听新页面的页面加载完成事件来实现页面过渡效果，即未监听到页面加载完成事件时，显示一个过渡页面，监听到页面加载完成事件时，移除该过渡页面。打开新页面时，需要先请求相应的接口以从服务器获取相关数据，然后再对获取到的数据进行加载以显示出页面内容。现有技术中通过监听页面加载完成事件来实现页面过渡效果，页面过渡效果单一，用户无法通过页面过渡效果了解到页面打开工作进行到哪一个阶段，进而在等待页面打开时，难以决定是继续等待还是关闭页面。

发明内容

本发明为解决现有页面过渡效果单一，用户无法通过页面过渡效果了解到页面打开工作进行到哪一个阶段，进而在等待页面打开时，难以决定是继续等待还是关闭页面的问题，提供一种页面过渡效果实现方法。

为解决上述问题，本发明采用的技术方案是：页面过渡效果实现方法，包括：

接收到打开新页面指令后，初始化当前接口访问数量为0，然后显示出预设的接口访问过渡页面，并实时监测当前接口访问数量，然后执行打开新页面指令，并实时监听新增的接口请求以及实时监听接口响应，每监听到一个新增的接口请求时，当前接口访问数量加1，每监听到一个接口响应时，当前接口访问数量减1；

若监测到当前接口访问数量由大于0的数变为0，则移除显示的接口访问过渡页面。

作为进一步优化，若监测到当前接口访问数量由大于0的数变为0，还显示出预设的页面加载过渡页面，并监听页面加载完成事件，若监听到页面加载完成事件，则移除显示的页面加载过渡页面。

作为进一步优化，基于Vue.js框架进行开发，执行打开新页面指令时，在Vue.js生命周期中的created阶段进行接口请求。

作为进一步优化，执行打开新页面指令时，通过Axios进行接口请求。

作为进一步优化，通过Axios设置接口请求拦截器来实时监听新增的接口请求，通过Axios设置接口响应拦截器来实时监听接口响应。

作为进一步优化，显示接口访问过渡页面时，采用HTML和CSS绘制接口访问过渡页面，通过将接口访问过渡页面的z-index值设置为最高以显示出接口访问过渡页面。

有益效果是：本申请通过监听接口请求和接口响应来判断打开新页面时相关数据的获取情况，并设置接口访问过渡页面，在请求接口的过程中显示接口访问过渡页面，所有请求的接口都得到响应后，移除接口访问过渡页面，使用户能够通过页面过渡效果了解到打开网页时，相关的数据是否获取完成，页面打开工作当前所处的阶段，进而辅助用户决定是继续等待还是关闭页面，比如用户在跳转网页时，显示界面一直停留在接口访问过渡页面，这时用户在确认设备网络完好的情况下，可以推知有极大可能是服务器异常，无法响应接口请求，那么用户就可以关闭网页，不必作无谓的等待。

具体实施方式

下面详细说明本发明的技术方案。

本发明的技术方案是：