基于SPA的视图切换处理方法及装置、设备、存储介质制造方法及图纸

本申请公开了一种基于SPA的视图切换处理方法及装置、设备、存储介质。该方法包括当通过应用程序在第一页面切换至第二页面时，将所述第二页面的视图附加在容器的元素列表中；当通过应用程序在第二页面切换至第三页面时，在容器中保留不大于两个DOM视图；当返回至上一页面即第二页面时，在HTML5中的用于改变网址时不需要刷新页面的接口已记录历史记录堆栈；当继续返回至上一页面即第一页面时，则在所述历史记录堆栈中不为空。本申请解决了基于SPA的视图切换效果不佳的技术问题。通过本申请保证了页面流畅度和高性能的同时实现了页面切换效果高仿原生。

Spa based view switching processing method and device, equipment and storage medium

【技术实现步骤摘要】
基于SPA的视图切换处理方法及装置、设备、存储介质
本申请涉及WEB前端页面切换领域，具体而言，涉及一种基于SPA的视图切换处理方法及装置、设备、存储介质。
技术介绍
单页Web应用(英文全称singlepagewebapplication，简称SPA)，在基于SPA的多页WEB应用程序中，通常页面视图切换都是基于监听HistoryAPI的状态变化，然后改变页面视图对应的DOM结构为新视图。专利技术人发现，如果直接改变大块的DOM结构，会出现视觉突变的闪烁效果，从而造成视觉突兀。针对相关技术中基于SPA的视图切换效果不佳的问题，目前尚未提出有效的解决方案。
技术实现思路
本申请的主要目的在于提供一种基于SPA的视图切换处理方法及装置、设备、存储介质，以解决基于SPA的视图切换效果不佳的问题。为了实现上述目的，根据本申请的一个方面，提供了一种基于SPA的视图切换处理方法，用于单页面多视图应用程序。根据本申请的基于SPA的视图切换处理方法包括：当通过应用程序在第一页面切换至第二页面时，将所述第二页本文档来自技高网...

【技术保护点】
1.一种基于SPA的视图切换处理方法，其特征在于，用于单页面多视图应用程序，包括：/n当通过应用程序在第一页面切换至第二页面时，将所述第二页面的视图附加在容器的元素列表中；/n当通过应用程序在第二页面切换至第三页面时，在容器中保留不大于两个DOM视图；/n当返回至上一页面即第二页面时，在HTML5中的用于改变网址时不需要刷新页面的接口已记录历史记录堆栈；/n当继续返回至上一页面即第一页面时，则在所述历史记录堆栈中不为空。/n

【技术特征摘要】
1.一种基于SPA的视图切换处理方法，其特征在于，用于单页面多视图应用程序，包括：
当通过应用程序在第一页面切换至第二页面时，将所述第二页面的视图附加在容器的元素列表中；
当通过应用程序在第二页面切换至第三页面时，在容器中保留不大于两个DOM视图；
当返回至上一页面即第二页面时，在HTML5中的用于改变网址时不需要刷新页面的接口已记录历史记录堆栈；
当继续返回至上一页面即第一页面时，则在所述历史记录堆栈中不为空。


2.根据权利要求1所述的视图切换处理方法，其特征在于，当通过应用程序在第二页面切换至第三页面时，在容器中保留不大于两个DOM视图包括：
将所述第一页面的视图从容器中删除，同时以非动画形式将在二维平面上水平方向移动元素突变到0％；
将所述第三页面视图插入到第二页面视图的后面，以动画形式将在二维平面上水平方向移动元素平移到-100％。


3.根据权利要求1所述的视图切换处理方法，其特征在于，当返回至上一页面即第二页面时，在HTML5中的用于改变网址时不需要刷新页面的接口已记录历史记录堆栈包括：
当返回至上一页面即第二页面时，在调用HTML5的pushState或者replaceState接口时，已记录了一个历史记录堆。


4.根据权利要求1所述的视图切换处理方法，其特征在于，当返回至上一页面即第二页面时，在HTML5中的用于改变网址时不需要刷新页面的接口已记录历史记录堆栈包括：
当返回至上一页面即第二页面时，以动画形式平移容器到在二维平面上水平方向移动元素到0％，删除所述第三页面视图。


5.根据权利要求1所述的视图切换处理方法，其特征在于，当继续返回至上一页面即第一页面时，则在所述历史记录堆栈中不为空包括：
当继续返回至上一页面即第一页面时，将所述第一页面插入到容器的最开始第二...

【专利技术属性】
技术研发人员：周晶，吴峰，郭伟，
申请(专利权)人：上海易点时空网络有限公司，
类型：发明
国别省市：上海;31