[英]how to implement back and forward functionality like browser
I want to implement functionality like back and forward in my project same as browser , like web page we have the screen. 我希望在我的项目中像浏览器一样实现后退和前进等功能,就像我们拥有屏幕的网页一样。 what i tried is intially m setting the
currentscreenindex=-1
我试过的是最初设置
currentscreenindex=-1
and when data of first screen comes execute this function 当第一个屏幕的数据到来时执行此功能
In screen data arrive function (){
this.currentscreenindex++;
this.screenvisited[this.currentscreenindex]=data;
}
Here is my back function what i tried : 这是我的后退功能我尝试过:
back(){
currentscreenindex--;
var screen=screenvisited[currentscreenindex];
// will go to this screen
}
but what my problem is in these is : 但我的问题在于:
currentscreenindex screen data in screenvisted array
When 1st screen arrived 0 Data of 1st screen
When 2st screen arrived 1 Data of 2st screen
When 3st screen arrived 2 Data of 3st screen
When 4st screen arrived 3 Data of 4st screen
When 5st screen arrived 4 Data of 5st screen
when user click back button 3 call the screen is set to 4th gib,
so when data of 4th screen arrive , the current index will get incremented so currentindex=4
and data at current index 4 will be of 4th screen , i think it is not correct , because if data at currentindex=4
will get changed then i can't do forward , if yes pls tell how can i correct it ? 所以当第4个屏幕的数据到达时,当前索引会增加,所以
currentindex=4
,当前索引4的数据将是第4个屏幕,我认为这是不正确的,因为如果currentindex=4
数据会改变那么我可以不做,如果是,请告诉我如何纠正它?
please suggest how can i write the proper back and forward function to do same functionality as browser . 请建议我如何编写正确的后退和前进功能来执行与浏览器相同的功能。
I don't know how you'd fit this into how you're currently doing it, but you can achieve the functionality like this: 我不知道你如何适应你现在的方式,但你可以实现这样的功能:
You have two stacks. 你有两个堆栈。 A back stack and a next stack.
后栈和下一个栈。 They both start out being empty.
他们都开始是空的。 When the user navigates to a new page through a link or some other method of navigation besides back/forward, clear the next stack, add the current page to the back stack, and continue navigation.
当用户通过链接或除了后退/前进之外的某种其他导航方法导航到新页面时,清除下一个堆栈,将当前页面添加到后堆栈,然后继续导航。 When the user clicks back, push the current page onto the forward stack, pop a page from the back stack, and navigate to the popped page.
当用户单击时,将当前页面推送到前向堆栈,从后堆栈弹出页面,然后导航到弹出页面。 When the user clicks forward, push the current page onto the back stack, pop a page from the forward stack, and navigate to the popped page.
当用户单击向前时,将当前页面推送到后台堆栈,从前向堆栈弹出一个页面,然后导航到弹出页面。
Edit: You asked for some pseudocode, so here you go: 编辑:您要求一些伪代码,所以在这里你去:
var currentPage=null;
var backStack=[];
var forwardStack=[];
function navigate(newPage) {
currentPage=newPage;
// stub
}
function linkClicked(page) {
backStack.push(currentPage);
forwardStack=[];
navigate(page);
}
function goBack() {
forwardStack.push(currentPage);
navigate(backStack.pop());
}
function goForward() {
backStack.push(currentPage);
navigate(forwardStack.pop());
}
You should have two numbers: lastScreenInHistory
, currentScreen
. 你应该有两个数字:
lastScreenInHistory
, currentScreen
。
On new screen arrival: 在新屏幕到达:
lastScreenInHistory = ++currentScreen;
this.screenvisited[this.lastScreenInHistory]=data;
On Back: if( currentScreen > 0 ) --currentScreen;
On Back:
if( currentScreen > 0 ) --currentScreen;
On Forward: if( currentScreen < lastScreenInHistory ) ++currentScreen;
On Forward:
if( currentScreen < lastScreenInHistory ) ++currentScreen;
Respective buttons should be enabled iff the corresponding if
statement expressions are true. 如果相应的
if
语句表达式为true,则应启用相应的按钮。
After both Back and Forward you should load the screen from screenvisited
at index currentScreen
. 在后退和前进之后,您应该从索引
currentScreen
screenvisited
加载屏幕。
How about this simple solution: 这个简单的解决方案如何:
back(){
currentscreenindex-=2;
var screen=screenvisited[currentscreenindex+1];
// will go to this screen
}
Then, when the 'screen' gets loaded, it will increment currentscreenindex
by 1, resulting in currentscreenindex - 2 + 1
- exactly what you need. 然后,当“屏幕”被加载时,它会增加
currentscreenindex
1,导致currentscreenindex - 2 + 1
-正是你需要的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.