一种页面切换方法、装置、电子设备及存储介质与流程
未命名
08-22
阅读:106
评论:0
1.本技术涉及计算机技术领域,具体涉及一种页面切换方法、装置、电子设备及存储介质。
背景技术:
2.移动端h5应用作为一款基于浏览器历史堆栈管理技术的应用,传统的网页路由,如网页路由技术react-router,通过浏览器强制刷新机制来实现页面的前进和回退,这种方式回退页面会强制刷新整个页面,导致上一级页面的数据和用户历史操作记录丢失,用户想重新快速定位到历史浏览记录是个难题,极大的影响用户体验。h5是指第5代超文本标记语言。
3.传统的网页路由机制基于单页面替换,浏览器历史堆栈很难动态管理,使h5应用前进和回退技术变得很难维护,同时,单页面替换缺少翻页动画效果,导致h5应用前进及回退页面显得很刻板。
技术实现要素:
4.本技术提供一种页面切换方法、装置、电子设备及存储介质,能够使页面前进和回退更符合用户需求,极大提升了用户体验。
5.第一方面,本技术提供一种页面切换方法,包括:
6.监听到页面前进操作,拦截新地址;所述页面前进操作是指打开新页面的操作;
7.根据所述新地址创建一个新页面;
8.确定第一页面堆栈,将创建的新页面缓存到所述第一页面堆栈;
9.判断当前所述第一页面堆栈的长度是否大于1;若是,则使用第一翻页动画方式打开新页面,否则,加载新页面。
10.在本技术的一些实施例中,所述将创建的新页面缓存到所述第一页面堆栈,包括:
11.通过压入方式,将创建的新页面缓存到所述第一页面堆栈的栈顶。
12.在本技术的一些实施例中,所述将创建的新页面缓存到所述第一页面堆栈,包括:
13.通过替换方式,将所述第一页面堆栈当前的栈顶页面替换为创建的新页面。
14.在本技术的一些实施例中,所述确定第一页面堆栈,包括:
15.检测是否存在页面堆栈;
16.若存在,则将存在的页面堆栈确定为第一页面堆栈;
17.若不存在,则创建一个页面堆栈,将创建的页面堆栈确定为第一页面堆栈。
18.第二方面,本技术提供一种页面切换方法,包括:
19.监听到页面回退操作,获取回退步数;
20.确定第二页面堆栈;
21.判断回退步数delta是否大于1;
22.若是,则移除所述第二页面堆栈顶部的delta-1个页面,并将回退步数delta重置
为1;
23.否则,判断当前所述第二页面堆栈长度是否大于1;若大于1,则移除第二页面堆栈的栈顶页面,使用第二翻页动画方式关闭当前页面,并销毁被移除的页面;若等于1,则先移除第二页面堆栈的栈顶页面,销毁被移除的页面,再执行预设的页面前进操作;若小于1,则执行预设的页面前进操作。
24.在本技术的一些实施例中,所述确定第二页面堆栈,包括:
25.检测是否存在页面堆栈;
26.若存在,则将存在页面堆栈确定为第二页面堆栈;
27.若不存在,则创建一个页面堆栈,将创建的页面堆栈确定为第二页面堆栈。
28.第三方面,本技术提供一种页面切换装置,包括:
29.第一监听模块,用于监听到页面前进操作,拦截新地址;所述页面前进操作是指打开新页面的操作;
30.第一页面创建模块,用于根据所述新地址创建一个新页面;
31.第一堆栈确定模块,用于确定第一页面堆栈,将创建的新页面缓存到所述第一页面堆栈;
32.第一判断模块,用于判断当前所述第一页面堆栈的长度是否大于1;若是,则使用第一翻页动画方式打开新页面,否则,加载新页面。
33.在本技术的一些实施例中,所述第一堆栈确定模块,具体用于:
34.通过压入方式,将创建的新页面缓存到所述第一页面堆栈的栈顶。
35.在本技术的一些实施例中,所述第一堆栈确定模块,具体用于:
36.通过替换方式,将所述第一页面堆栈当前的栈顶页面替换为创建的新页面。
37.在本技术的一些实施例中,所述第一堆栈确定模块,具体用于:
38.检测是否存在页面堆栈;
39.若存在,则将存在的页面堆栈确定为第一页面堆栈;
40.若不存在,则创建一个页面堆栈,将创建的页面堆栈确定为第一页面堆栈。
41.第四方面,本技术提供一种页面切换装置,包括:
42.第二监听模块,用于监听到页面回退操作,获取回退步数;
43.第二堆栈确定模块,用于确定第二页面堆栈;
44.第二判断模块,用于判断回退步数delta是否大于1;若是,移除所述第二页面堆栈顶部的delta-1个页面,并将回退步数delta重置为1;否则,判断当前所述第二页面堆栈长度是否大于1;若大于1,则移除第二页面堆栈的栈顶页面,使用第二翻页动画方式关闭当前页面,并销毁被移除的页面;若等于1,则先移除第二页面堆栈的栈顶页面,销毁被移除的页面,再执行预设的页面前进操作;若小于1,则执行预设的页面前进操作。
45.在本技术的一些实施例中,所述第二堆栈确定模块,具体用于:
46.检测是否存在页面堆栈;
47.若存在,则将存在页面堆栈确定为第二页面堆栈;
48.若不存在,则创建一个页面堆栈,将创建的页面堆栈确定为第二页面堆栈。
49.第五方面,本技术提供一种电子设备,包括:存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序,所述处理器运行所述计算机程序以实现本技术
第一方面或第二方面所述的方法。
50.本技术第六方面提供一种计算机可读存储介质,其上存储有计算机可读指令,所述计算机可读指令可被处理器执行以实现本技术第一方面或第二方面所述的方法。
51.相较于现有技术,本技术提供的页面切换方法、装置、设备及存储介质,基于历史堆栈,通过维护一套页面堆栈机制,重写了网页路由的前进和回退操作,实现了网页应用路由的多页面管理,前进和回退切换页面引入翻页动画效果,回退页面时,不会导致历史页面强制刷新,历史数据和用户历史操作也会保留,用户可以快速定位自己的历史浏览记录,极大提升了用户体验。
附图说明
52.通过阅读下文优选实施方式的详细描述,各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的,而并不认为是对本技术的限制。而且在整个附图中,用相同的参考符号表示相同的部件。在附图中:
53.图1示出了本技术实施例提供的一种页面切换方法的流程图;
54.图2示出了本技术实施例提供的压入方式和替换方式的页面堆栈操作示意图;
55.图3示出了本技术实施例提供的一种具体的页面切换方法的流程图;
56.图4示出了本技术实施例提供的另一种页面切换方法的流程图;
57.图5示出了本技术实施例提供的另一种具体的页面切换方法的流程图;
58.图6示出了本技术实施例提供的一种页面切换装置的结构示意图;
59.图7示出了本技术实施例提供的另一种页面切换装置的结构示意图;
60.图8示出了本技术实施例提供的一种电子设备的示意图;
61.图9示出了本技术实施例提供的一种计算机可读存储介质的示意图。
具体实施方式
62.下面将参照附图更详细地描述本公开的示例性实施方式。虽然附图中显示了本公开的示例性实施方式,然而应当理解,可以以各种形式实现本公开而不应被这里阐述的实施方式所限制。相反,提供这些实施方式是为了能够更透彻地理解本公开,并且能够将本公开的范围完整的传达给本领域的技术人员。
63.需要注意的是,除非另有说明,本技术使用的技术术语或者科学术语应当为本技术所属领域技术人员所理解的通常意义。
64.另外,术语“第一”和“第二”等是用于区别不同对象,而不是用于描述特定顺序。此外,术语“包括”和“具有”以及它们任何变形,意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元,而是可选地还包括没有列出的步骤或单元,或可选地还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。
65.本技术实施例提供一种页面切换方法及装置、一种电子设备以及计算机可读介质,下面结合附图进行说明。
66.请参考图1,其示出了本技术实施例提供的一种页面切换方法的流程图,如图1所示,该页面切换方法,可以包括以下步骤:
67.s101、监听到页面前进操作,拦截新地址。
68.在网页应用或浏览器中,会有点击前进、返回、后退、上一页等按钮实现打开页面、关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求,可以使用特定的事件进行监听前进、返回、后退、上一页等操作。
69.网页应用,例如可以是h5应用,也可以是别的格式的网页应用,本技术对此不做限定。
70.本技术实施例可以应用于网页应用的前进操作,页面前进操作是指打开新页面的操作。具体的,首先通过特定事件监听页面前进操作,当监听到页面前进操作时,拦截需要打开的新页面的新地址。
71.s102、根据新地址创建一个新页面。
72.具体的,可以根据新页面的新地址从相应的服务器中获取到新页面的页面信息,如h5文件。
73.s103、确定第一页面堆栈,将创建的新页面缓存到所述第一页面堆栈。
74.一些实施例中,步骤s103中确定第一页面堆栈的步骤具体包括:
75.检测是否存在页面堆栈;若存在,则将存在的页面堆栈确定为第一页面堆栈;若不存在,则创建一个页面堆栈,将创建的页面堆栈确定为第一页面堆栈。
76.具体的,检查当前浏览器中是否已经建立了网页应用的页面堆栈,若没有,则建立一个页面堆栈,用于进行多页面管理,页面堆栈的长度是指页面堆栈中存在多少个页面。
77.一些实施例中,步骤s103中将创建的新页面缓存到第一页面堆栈,具体包括:通过压入方式,将创建的新页面缓存到所述第一页面堆栈的栈顶。
78.具体的,压入方式是指直接将新页面放在现有页面堆栈的栈顶,并可以记录相关操作为push。
79.用户可以根据实际需要选择通过压入方式将创建的新页面缓存到第一页面堆栈的栈顶,即路由跳转时默认为压入方式。例如,在浏览器页面中存在两个路由标签:“a保险信息展示”和“b保险信息展示”,当用户点击“a保险信息展示”标签时,会显示a保险信息页面,当用户点击“b保险信息展示”标签时,会显示b保险信息页面。在一种场景下,用户先点击“a保险信息展示”标签,后点击“b保险信息展示”标签,由于页面路由采用的是压入方式,b保险信息页面在页面堆栈中处于a保险信息页面的顶端,此时,用户可以在浏览器上通过前进和返回按钮,反复切换a保险信息页面和b保险信息页面,从而可以对a保险信息页面和b保险信息页面中的信息进行比对,以便选择符合需求的保险,提升用户体验。
80.在另一种场景下,在浏览器页面中可能存在两个以上的路由标签,用户可以先后点击其中的任意标签,由于页面路由采用的是压入方式,用户最后点击的标签对应的保险信息页面在页面堆栈中处于顶端,所有用户点击的标签对应的保险信息页面按照压入方式堆在页面堆栈中,此时,用户可以在浏览器上通过前进和返回按钮,反复切换已打开的保险信息页面进行比对,以便选择符合需求的保险,提升用户体验。
81.一些实施例中,步骤s103中将创建的新页面缓存到第一页面堆栈,具体包括:通过替换方式,将所述第一页面堆栈当前的栈顶页面替换为创建的新页面。
82.具体的,替换方式是指移除当前页面堆栈的栈顶页面,然后将新页面放在页面堆栈的栈顶,并可以记录相关操作为replace。
83.用户可以根据实际需要选择通过替换方式将创建的新页面缓存到第一页面堆栈的栈顶,即路由跳转时默认为替换方式。还以上述在浏览器页面中存在两个路由标签:“a保险信息展示”和“b保险信息展示”为例,当用户点击“a保险信息展示”标签时,会显示a保险信息页面,当用户点击“b保险信息展示”标签时,会显示b保险信息页面。在一种场景下,用户先点击“a保险信息展示”标签,后点击“b保险信息展示”标签,由于页面路由采用的是替换方式,b保险信息页面在页面堆栈中替换了堆栈顶端的a保险信息页面,堆栈的长度不会增加,此时,用户不可以在浏览器上通过前进和返回按钮,切换a保险信息页面和b保险信息页面,可以防止浏览器的返回操作使页面回到之前的a保险信息页面,在一些合适的场景下使用替换方式,可以提升用户体验。例如登录后,不需要重新回到登录页面的场景。
84.为了便于理解,如图2示出了上述压入方式和替换方式的页面堆栈操作示意图。
85.s104、判断当前所述第一页面堆栈的长度是否大于1;若是,跳转步骤s105,否则跳转步骤s106。
86.s105、使用第一翻页动画方式打开新页面。
87.s106、直接加载新页面。
88.具体的,第一翻页动画方式可以是用户根据实际情况选择的,例如可以是从左到右翻页的动画效果,也可以是其它形式的翻页动画效果,本技术不做任何限定。
89.为了便于理解,如图3所示是以从左到右翻页的动画效果对上述页面切换方法进行示例。如图3所示,监听到页面前进操作,拦截新地址;根据新地址创建一个新页面;确定页面堆栈,将创建的新页面缓存到所述页面堆栈;判断当前页面堆栈的长度是否大于1;若是,则使用从左到右翻页的动画效果打开新页面,否则加载浏览器地址打开新页面。
90.本技术的上述页面切换方法,重写了网页路由的前进操作,前进切换页面引入了翻页动画效果,使得前进页面显得很自然顺滑,不像现有技术那么刻板,大大提高了用户体验。
91.本技术的页面生命周期还采用以下控件进行管理:
92.willshow控件:页面视图即将可见时触发该控件,默认情况下不执行任何操作。
93.willhide控件,页面视图即将消失时触发该控件,默认情况下不执行任何操作。
94.didshow控件,页面视图展示完成时触发该控件,默认情况下不执行任何操作。
95.didhide控件,页面视图已经消失时触发该控件,默认情况下不执行任何操作。
96.例如,在执行图3所示的页面切换方法时,包括以下场景:
97.场景1.1:新页面a的视图即将可见时,触发willshow控件;
98.场景1.2:页面堆栈中存储的栈顶数据对应的页面b即将消失时,触发willhide控件;
99.场景1.3:页面堆栈中存储的栈顶数据对应的页面b已经消失时,触发didhide控件;
100.场景1.4:新页面a的视图展示完成时,触发didshow控件。
101.上述每个控件被触发时,可以使页面的打开和关闭呈现相应的效果,显得很自然顺滑,提升用户体验。
102.请参考图4,其示出了本技术实施例提供的另一种页面切换方法的流程图,如图4所示,该页面切换方法,可以包括以下步骤:
103.s201、监听到页面回退操作,获取回退步数;
104.本技术实施例可以应用于网页应用的回退操作,页面回退操作是指回退到指定页面的操作,例如回退到上一页面(回退1步)、回退两个页面(回退2步)等。具体的,可以通过浏览器的回退方法history.go(delta)更新浏览器地址,通过特定事件监听页面回退操作,当监听到页面回退操作时,获取具体的回退步数。
105.s202、确定第二页面堆栈;
106.一些实施例中,步骤s202中确定第二页面堆栈的步骤,具体包括:
107.检测是否存在页面堆栈;若存在,则将存在页面堆栈确定为第二页面堆栈;若不存在,则创建一个页面堆栈,将创建的页面堆栈确定为第二页面堆栈。
108.具体的,检查当前浏览器中是否已经建立了网页应用的页面堆栈,若没有,则建立一个页面堆栈,用于进行多页面管理,页面堆栈的长度是指页面堆栈中存在多少个页面。
109.s203、判断回退步数delta是否大于1;若是,则跳转到步骤s204;否则,跳转到步骤s205;
110.s204、移除所述第二页面堆栈顶部的delta-1个页面,并将回退步数delta重置为1;
111.s205、判断当前所述第二页面堆栈长度是否大于1;若大于1,则移除第二页面堆栈的栈顶页面,使用第二翻页动画方式关闭当前页面,并销毁被移除的页面;若等于1,则先移除第二页面堆栈的栈顶页面,销毁被移除的页面,再执行预设的页面前进操作;若小于1,则执行预设的页面前进操作。此处的页面前进操作可以是本技术上述实施例提供的应用于网页应用的前进操作。
112.具体的,第二翻页动画方式可以是用户根据实际情况选择的,例如,与前进操作的第一翻页动画效果对应可以选择从右到左翻页的动画效果,也可以是其它形式的翻页动画效果,本技术不做任何限定。
113.为了便于理解,如图5所示是以从右到左翻页的动画效果对上述页面切换方法进行示例。如图5所示,监听到页面回退操作,获取回退步数;确定页面堆栈,判断回退步数delta是否大于1,若是,则移除页面堆栈顶部的delta-1个页面,并将回退步数delta重置为1,判断当前页面堆栈长度是否大于1;否则直接判断当前页面堆栈长度是否大于1,若大于1,则移除页面堆栈的栈顶页面,使用从右到左翻页的动画效果关闭当前页面,并销毁被移除的页面;若等于1,则先移除页面堆栈的栈顶页面,销毁被移除的页面,再执行预设的页面前进操作;若小于1,则执行预设的页面前进操作。
114.本技术重写了网页路由的前进和回退方法,实现从左到右翻页动画打开新页面,从右到左翻页动画关闭页面,使前进和回退切换页面变得自然流畅,进一步提升了用户体验。
115.本技术的页面生命周期还采用以下控件进行管理:willshow控件、willhide控件、didshow控件和didhide控件。
116.例如,在执行图5所示的页面切换方法时,包括以下场景:
117.场景2.1:页面堆栈中存储的栈顶数据对应的页面a的视图即将消失时,触发willhide控件;
118.场景2.2:页面堆栈中存储的目标回退页面b的视图即将可见时,触发willshow控
件;
119.场景2.3:页面堆栈中存储的栈顶数据对应的页面a的视图已经消失时,,触发didhide控件;
120.场景2.4:页面堆栈中存储的目标回退页面b的视图展示完成时,触发didshow控件;
121.本技术通过上述各控件监听各页面的生命周期,根据不同业务实现按需预加载、静默刷新等优化程序性能和用户体验的操作。
122.本技术提供的页面切换方法,基于历史堆栈,通过维护一套页面堆栈机制,重写了网页路由的前进和回退操作,实现了网页应用路由的多页面管理,前进和回退切换页面引入翻页动画效果,回退页面时,不会导致历史页面强制刷新,历史数据和用户历史操作也会保留,用户可以快速定位自己的历史浏览记录,极大提升了用户体验。
123.请参考图6,其示出了本技术的一些实施方式所提供的一种页面切换装置的示意图。由于装置实施例基本相似于方法实施例,所以描述得比较简单,相关之处参见方法实施例的部分说明即可。下述描述的装置实施例仅仅是示意性的。
124.如图6所示,所述页面切换装置100,可以包括:
125.第一监听模块110,用于监听到页面前进操作,拦截新地址;所述页面前进操作是指打开新页面的操作;
126.第一页面创建模块120,用于根据所述新地址创建一个新页面;
127.第一堆栈确定模块130,用于确定第一页面堆栈,将创建的新页面缓存到所述第一页面堆栈;
128.第一判断模块140,用于判断当前所述第一页面堆栈的长度是否大于1;若是,则使用第一翻页动画方式打开新页面,否则,加载新页面。
129.在本技术的一些实施例中,所述第一堆栈确定模块130,具体用于:
130.通过压入方式,将创建的新页面缓存到所述第一页面堆栈的栈顶。
131.用户可以根据实际需要选择通过压入方式将创建的新页面缓存到第一页面堆栈的栈顶,即路由跳转时默认为压入方式。例如,在浏览器页面中存在两个路由标签:“a保险信息展示”和“b保险信息展示”,当用户点击“a保险信息展示”标签时,会显示a保险信息页面,当用户点击“b保险信息展示”标签时,会显示b保险信息页面。在一种场景下,用户先点击“a保险信息展示”标签,后点击“b保险信息展示”标签,由于页面路由采用的是压入方式,b保险信息页面在页面堆栈中处于a保险信息页面的顶端,此时,用户可以在浏览器上通过前进和返回按钮,反复切换a保险信息页面和b保险信息页面,从而可以对a保险信息页面和b保险信息页面中的信息进行比对,以便选择符合需求的保险,提升用户体验。
132.在另一种场景下,在浏览器页面中可能存在两个以上的路由标签,用户可以先后点击其中的任意标签,由于页面路由采用的是压入方式,用户最后点击的标签对应的保险信息页面在页面堆栈中处于顶端,所有用户点击的标签对应的保险信息页面按照压入方式堆在页面堆栈中,此时,用户可以在浏览器上通过前进和返回按钮,反复切换已打开的保险信息页面进行比对,以便选择符合需求的保险,提升用户体验。
133.在本技术的一些实施例中,所述第一堆栈确定模块130,具体用于:
134.通过替换方式,将所述第一页面堆栈当前的栈顶页面替换为创建的新页面。
135.用户可以根据实际需要选择通过替换方式将创建的新页面缓存到第一页面堆栈的栈顶,即路由跳转时默认为替换方式。还以上述在浏览器页面中存在两个路由标签:“a保险信息展示”和“b保险信息展示”为例,当用户点击“a保险信息展示”标签时,会显示a保险信息页面,当用户点击“b保险信息展示”标签时,会显示b保险信息页面。在一种场景下,用户先点击“a保险信息展示”标签,后点击“b保险信息展示”标签,由于页面路由采用的是替换方式,b保险信息页面在页面堆栈中替换了堆栈顶端的a保险信息页面,堆栈的长度不会增加,此时,用户不可以在浏览器上通过前进和返回按钮,切换a保险信息页面和b保险信息页面,可以防止浏览器的返回操作使页面回到之前的a保险信息页面,在一些合适的场景下使用替换方式,可以提升用户体验。例如登录后,不需要重新回到登录页面的场景。
136.在本技术的一些实施例中,所述第一堆栈确定模块130,具体用于:
137.检测是否存在页面堆栈;
138.若存在,则将存在的页面堆栈确定为第一页面堆栈;
139.若不存在,则创建一个页面堆栈,将创建的页面堆栈确定为第一页面堆栈。
140.本技术实施例提供的页面切换装置与本技术实施例提供的页面切换方法出于相同的发明构思,具有与其采用、运行或实现的方法相同的有益效果。
141.请参考图7,其示出了本技术的一些实施方式所提供的另一种页面切换装置的示意图。由于装置实施例基本相似于方法实施例,所以描述得比较简单,相关之处参见方法实施例的部分说明即可。下述描述的装置实施例仅仅是示意性的。
142.如图7所示,所述页面切换装置200,可以包括:
143.第二监听模块210,用于监听到页面回退操作,获取回退步数;
144.第二堆栈确定模块220,用于确定第二页面堆栈;
145.第二判断模块230,用于判断回退步数delta是否大于1;
146.若是,则移除所述第二页面堆栈顶部的delta-1个页面,并将回退步数delta重置为1;
147.否则,执行以下步骤:
148.判断当前所述第二页面堆栈长度是否大于1;若大于1,则移除第二页面堆栈的栈顶页面,使用第二翻页动画方式关闭当前页面,并销毁被移除的页面;若等于1,则先移除第二页面堆栈的栈顶页面,销毁被移除的页面,再执行预设的页面前进操作;若小于1,则执行预设的页面前进操作。
149.在本技术的一些实施例中,所述第二堆栈确定模块220,具体用于:
150.检测是否存在页面堆栈;
151.若存在,则将存在页面堆栈确定为第二页面堆栈;
152.若不存在,则创建一个页面堆栈,将创建的页面堆栈确定为第二页面堆栈。
153.本技术实施例提供的页面切换装置与本技术实施例提供的页面切换方法出于相同的发明构思,具有与其采用、运行或实现的方法相同的有益效果。
154.本技术实施方式还提供一种与前述实施方式所提供的页面切换方法对应的电子设备,所述电子设备可以是手机、笔记本电脑、平板电脑、台式机电脑等,以执行上述页面切换方法。
155.请参考图8,其示出了本技术的一些实施方式所提供的一种电子设备的示意图。如
图8所示,所述电子设备20包括:处理器2000,存储器201,总线202和通信接口203,所述处理器2000、通信接口203和存储器201通过总线202连接;所述存储器201中存储有可在所述处理器200上运行的计算机程序,所述处理器2000运行所述计算机程序时执行本技术前述任一实施方式所提供的页面切换方法。
156.其中,存储器201可能包含高速随机存取存储器(ram:random access memory),也可能还包括非不稳定的存储器(non-volatile memory),例如至少一个磁盘存储器。通过至少一个通信接口203(可以是有线或者无线)实现该系统网元与至少一个其他网元之间的通信连接,可以使用互联网、广域网、本地网、城域网等。
157.总线202可以是isa总线、pci总线或eisa总线等。所述总线可以分为地址总线、数据总线、控制总线等。其中,存储器201用于存储程序,所述处理器200在接收到执行指令后,执行所述程序,前述本技术实施例任一实施方式揭示的所述页面切换方法可以应用于处理器2000中,或者由处理器2000实现。
158.处理器2000可能是一种集成电路芯片,具有信号的处理能力。在实现过程中,上述方法的各步骤可以通过处理器2000中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器2000可以是通用处理器,包括中央处理器(central processing unit,简称cpu)、网络处理器(network processor,简称np)等;还可以是数字信号处理器(dsp)、专用集成电路(asic)、现成可编程门阵列(fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本技术实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本技术实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成,或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器,闪存、只读存储器,可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器201,处理器2000读取存储器201中的信息,结合其硬件完成上述方法的步骤。
159.本技术实施例提供的电子设备与本技术实施例提供的页面切换方法出于相同的发明构思,具有与其采用、运行或实现的方法相同的有益效果。
160.本技术实施方式还提供一种与前述实施方式所提供的页面切换方法对应的计算机可读存储介质,请参考图9,其示出的计算机可读存储介质为光盘30,其上存储有计算机程序(即程序产品),所述计算机程序在被处理器运行时,会执行前述任意实施方式所提供的页面切换方法。
161.需要说明的是,所述计算机可读存储介质的例子还可以包括,但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他光学、磁性存储介质,在此不再一一赘述。
162.本技术的上述实施例提供的计算机可读存储介质与本技术实施例提供的页面切换方法出于相同的发明构思,具有与其存储的应用程序所采用、运行或实现的方法相同的有益效果。
163.需要说明的是,附图中的流程图和框图显示了根据本技术的多个实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的
每个方框可以代表一个模块、程序段或代码的一部分,所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个连续的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合,可以用执行规定的功能或动作的专用的基于硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。
164.在本技术中,术语“上”、“下”、“左”、“右”、“前”、“后”、“顶”、“底”、“内”、“外”、“中”、“竖直”、“水平”、“横向”、“纵向”等指示的方位或位置关系为基于附图所示的方位或位置关系。这些术语主要是为了更好地描述本技术及其实施例,并非用于限定所指示的装置、元件或组成部分必须具有特定方位,或以特定方位进行构造和操作。
165.并且,上述部分术语除了可以用于表示方位或位置关系以外,还可能用于表示其他含义,例如术语“上”在某些情况下也可能用于表示某种依附关系或连接关系。对于本领域普通技术人员而言,可以根据具体情况理解这些术语在本技术中的具体含义。
166.此外,术语“安装”、“设置”、“设有”、“连接”、“相连”、“套接”应做广义理解。例如,可以是固定连接,可拆卸连接,或整体式构造;可以是机械连接,或电连接;可以是直接相连,或者是通过中间媒介间接相连,又或者是两个装置、元件或组成部分之间内部的连通。对于本领域普通技术人员而言,可以根据具体情况理解上述术语在本技术中的具体含义。
167.最后应说明的是:以上各实施例仅用以说明本技术的技术方案,而非对其限制;尽管参照前述各实施例对本技术进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分或者全部技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本技术各实施例技术方案的范围,其均应涵盖在本技术的权利要求和说明书的范围当中。
技术特征:
1.一种页面切换方法,其特征在于,包括:监听到页面前进操作,拦截新地址;所述页面前进操作是指打开新页面的操作;根据所述新地址创建一个新页面;确定第一页面堆栈,将创建的新页面缓存到所述第一页面堆栈;判断当前所述第一页面堆栈的长度是否大于1;若是,则使用第一翻页动画方式打开新页面,否则,加载新页面。2.根据权利要求1所述的方法,其特征在于,所述将创建的新页面缓存到所述第一页面堆栈,包括:通过压入方式,将创建的新页面缓存到所述第一页面堆栈的栈顶。3.根据权利要求1所述的方法,其特征在于,所述将创建的新页面缓存到所述第一页面堆栈,包括:通过替换方式,将所述第一页面堆栈当前的栈顶页面替换为创建的新页面。4.根据权利要求1所述的方法,其特征在于,所述确定第一页面堆栈,包括:检测是否存在页面堆栈;若存在,则将存在的页面堆栈确定为第一页面堆栈;若不存在,则创建一个页面堆栈,将创建的页面堆栈确定为第一页面堆栈。5.一种页面切换方法,其特征在于,包括:监听到页面回退操作,获取回退步数;确定第二页面堆栈;判断回退步数delta是否大于1;若是,则移除所述第二页面堆栈顶部的delta-1个页面,并将回退步数delta重置为1;否则,判断当前所述第二页面堆栈长度是否大于1;若大于1,则移除第二页面堆栈的栈顶页面,使用第二翻页动画方式关闭当前页面,并销毁被移除的页面;若等于1,则先移除第二页面堆栈的栈顶页面,销毁被移除的页面,再执行预设的页面前进操作;若小于1,则执行预设的页面前进操作。6.根据权利要求5所述的方法,其特征在于,所述确定第二页面堆栈,包括:检测是否存在页面堆栈;若存在,则将存在页面堆栈确定为第二页面堆栈;若不存在,则创建一个页面堆栈,将创建的页面堆栈确定为第二页面堆栈。7.一种页面切换装置,其特征在于,包括:第一监听模块,用于监听到页面前进操作,拦截新地址;所述页面前进操作是指打开新页面的操作;第一页面创建模块,用于根据所述新地址创建一个新页面;第一堆栈确定模块,用于确定第一页面堆栈,将创建的新页面缓存到所述第一页面堆栈;第一判断模块,用于判断当前所述第一页面堆栈的长度是否大于1;若是,则使用第一翻页动画方式打开新页面,否则,加载新页面。8.一种页面切换装置,其特征在于,包括:第二监听模块,用于监听到页面回退操作,获取回退步数;
第二堆栈确定模块,用于确定第二页面堆栈;第二判断模块,用于判断回退步数delta是否大于1;若是,移除所述第二页面堆栈顶部的delta-1个页面,并将回退步数delta重置为1;否则,判断当前所述第二页面堆栈长度是否大于1;若大于1,则移除第二页面堆栈的栈顶页面,使用第二翻页动画方式关闭当前页面,并销毁被移除的页面;若等于1,则先移除第二页面堆栈的栈顶页面,销毁被移除的页面,再执行预设的页面前进操作;若小于1,则执行预设的页面前进操作。9.一种电子设备,包括:存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序,其特征在于,所述处理器运行所述计算机程序以实现如权利要求1至6中任一项所述的方法。10.一种计算机可读存储介质,其特征在于,其上存储有计算机可读指令,所述计算机可读指令可被处理器执行以实现如权利要求1至6中任一项所述的方法。
技术总结
本申请提供一种页面切换方法、装置、电子设备及计算机可读存储介质。其中方法包括:监听到页面前进操作,拦截新地址;所述页面前进操作是指打开新页面的操作;根据所述新地址创建一个新页面;确定第一页面堆栈,将创建的新页面缓存到所述第一页面堆栈;判断当前所述第一页面堆栈的长度是否大于1;若是,则使用第一翻页动画方式打开新页面,否则,加载新页面。本申请的技术方案,重写了网页路由的前进操作,实现了网页应用路由的多页面管理,前进切换页面引入翻页动画效果,页面切换自然顺畅,极大提升了用户体验。提升了用户体验。提升了用户体验。
技术研发人员:田天若
受保护的技术使用者:康键信息技术(深圳)有限公司
技术研发日:2023.06.02
技术公布日:2023/8/21
版权声明
本文仅代表作者观点,不代表航家之家立场。
本文系作者授权航家号发表,未经原创作者书面授权,任何单位或个人不得引用、复制、转载、摘编、链接或以其他任何方式复制发表。任何单位或个人在获得书面授权使用航空之家内容时,须注明作者及来源 “航空之家”。如非法使用航空之家的部分或全部内容的,航空之家将依法追究其法律责任。(航空之家官方QQ:2926969996)
航空之家 https://www.aerohome.com.cn/
飞机超市 https://mall.aerohome.com.cn/
航空资讯 https://news.aerohome.com.cn/
