3

目前我正在通过 OpenUI 框架在 phonegap 中开发应用程序。我想增加 popPage()函数的堆栈。目前我可以返回上一页，但不能更多。我可以给ons.navigator.pushPage()转换与popPage()相同吗？请有人帮助我尽快解决这些问题。

4

5 回答 5

1

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

您可以使用ons.navigator.resetToPage(url)

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

索引.html

index.html 有 page1.html 作为根页面。

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

page1.html

page1 将推送到第 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>
于 2014-03-28T06:46:16.567 回答
1

我面临着和你一样的问题。我最终会覆盖默认的 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);
    }
});

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

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

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

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

于 2014-09-15T10:43:28.353 回答
0

我也使用 ons.navigator.resetToPage(url)，你可以使用选项的第二个参数设置动画，例如：

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

于 2014-12-30T18:53:06.413 回答
0

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

您可以在中间销毁页面，然后弹出状态。

于 2015-10-13T18:58:48.443 回答
0

我不确定onsen ui ver.2，但使用onsen ui ver.1 ，您可以在ons-navigator 标签中定义一个 var 属性，如下所示：

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

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

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

欲了解更多信息：
温泉 UI 文档

于 2017-07-13T04:53:52.187 回答