Question

目前我正在通过OpenUI框架在phonegap中开发应用程序。我想增加popPage（）功能的堆栈。目前我可以回到上一页，但不止于此。我可以将 ons.navigator.pushPage（）过渡与 popPage（）相同吗？请有人帮我尽快解决这些问题。

Answer 1

我想你想跳到跳过first.html的第一页。

您可以使用 ons.navigator.resetToPage（网址）

我们假设你有index.html，page1.html，page2.html和page3.html。当我们在page3.html时，我们想跳转到page1.html，跳过page2.html。

<强>的index.html

index.html将page1.html作为根页。

<body>
  <ons-navigator page="page1.html"></ons-navigator>
</body>

<强> page1.html

第1页将推送到第2页

<ons-page>
  <ons-button ng-click="ons.navigator.pushPage('page2.html')">
     Push Page 2
  </ons-button>
</ons-page>

<强> page2.html

第2页将推送到第3页

<ons-page>
  <ons-button ng-click="ons.navigator.pushPage('page3.html')">
     Push Page 3
  </ons-button>
</ons-page>

<强> page3.html

第3页将重置为第1页（跳过第2页）

<ons-page>
  <ons-button ng-click="ons.navigator.resetToPage('page1.html')">
     Reset to page 1
  </ons-button>
</ons-page>

Answer 2

我面临与你的问题相同的方式。我最终会覆盖默认的popPage函数。

这就是我想要做的事情。

ons.ready(function(){
    /* Custom poppage */
    ons.navigator._popPage = function(options){
        var unlock = this._doorLock.lock();

        var leavePage = this.pages.pop();

        var step = options.step ? options.step : 1; // added step option

        if (this.pages[this.pages.length - step]) {
          this.pages[this.pages.length - step].element.css('display', 'block');
        }

        var enterPage = this.pages[this.pages.length -step];

        var event = {
          leavePage: leavePage,
          enterPage: this.pages[this.pages.length - step],
          navigator: this
        };

        var callback = function() {
            for(var s=1; s < step; s++){
                this.pages[this.pages.length - s].destroy();   // also destroy skipped page                    
            }
            leavePage.destroy();
            unlock();
            this.emit('postpop', event);
            event.leavePage = null;

            if (typeof options.onTransitionEnd === 'function') {
            options.onTransitionEnd();
            }
        }.bind(this);

        leavePage.options.animator.pop(enterPage, leavePage, callback);
    }
});

我在选项参数中添加了步骤变量，让我决定我想要返回多少页面。

这是我如何使用自定义功能：

ons.navigator.popPage({step:2});

可能不是非常聪明的解决方案，但我希望它可以为您提供更好的解决方案。

Answer 3

我也使用ons.navigator.resetToPage（url），你可以使用第二个param为选项设置动画，例如：

ons.navigator.resetToPage(url, { animation: 'fade' })

Answer 4

看看： https://github.com/OnsenUI/OnsenUI/issues/226

你可以破坏中间的页面，然后弹出状态。

Answer 5

我不确定 onsen ui ver.2 ，但使用 onsen ui ver.1 ，您可以在 ons中定义var属性-navigator标签是这样的：

<ons-navigator title="Navigator" var="testing_Nav">
  . 
  .
  .
  .
</ons-navigator>

在您的js文件中，您可以使用该变量导航到所需的页面，如下所示：

testing_Nav.resetToPage('page_name.html', {animation: 'fade'});

更多信息：
Onsen UI Documentation

如何在OnsenUI中增加popPage（）的堆栈？

5 个答案: