Onsen-UI幻灯片导航错误

Question

当我使用 'slide' 转换到 person.html 页面时，出现以下错误："Fail to fetch PageView from ons-page element."

当我将转换从 'slide' 更改为 'fade' 时，我没有收到错误消息。

<ons-navigator title="Navigator" var="myNavigator">
    <ons-sliding-menu main-page="index.html" menu-page="menu-timeline.html" max-slide-distance="260px" type="push" var="menu">
    </ons-sliding-menu>
    <ons-template id="index.html">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button>
                        <ons-icon icon="ion-home" fixed-width="false" style="font-size: 26px; vertical-align: -4px"></ons-icon>
                        People App
                    </ons-toolbar-button>
                </div>
                <div class="center">People</div>
                <div class="right">
                    <ons-toolbar-button>
                        <ons-icon icon="ion-search" onclick="myNavigator.pushPage('search-global.html', { animation : 'fade' } )"></ons-icon>
                    </ons-toolbar-button>
                    <ons-toolbar-button ng-click="menu.toggleMenu()">
                        <ons-icon icon="ion-more"></ons-icon>
                    </ons-toolbar-button>
                </div>
            </ons-toolbar>
            <!-- changing 'slide' to 'fade' below removes the error -->
            <ons-list class="timeline" modifier="inset">
                <ons-list-item class="timeline-li" modifier="tappable" ng-repeat="i in [1,2,3]" ng-click="myNavigator.pushPage('person.html', { animation : 'slide' } )">
                    <ons-row>
                        <ons-col width="50px">
                            <img ng-src="https://placeholdit.imgix.net/~text?txtsize=8&txt=50%C3%9750&w=50&h=50" class="timeline-image">
                        </ons-col>
                        <ons-col>
                            <div class="timline-from">
                                <span class="timeline-name">My Awesome Friend</span>
                            </div>
                        </ons-col>
                    </ons-row>
                </ons-list-item>
            </ons-list>

        </ons-page>
    </ons-template>

    <ons-template id="menu-timeline.html">
        <ons-page modifier="menu-page">
            <ons-toolbar modifier="transparent">
                <div class="right">
                    <ons-toolbar-button class="menu-closeMenu" ng-click="menu.closeMenu()">
                        </ons-icon>Close
                    </ons-toolbar-button>
                </div>
            </ons-toolbar>
            <ons-list class="menu-list">
                <ons-list-item class="menu-item" ng-click="menu.closeMenu()">
                    <ons-icon icon="fa-plus"></ons-icon>
                    New Person
                </ons-list-item>
            </ons-list>
        </ons-page>
    </ons-template>
    <ons-template id="person.html">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button onclick="myNavigator.popPage();">
                        <ons-icon icon="ion-arrow-left-a" fixed-width="false" style="font-size: 20px;vertical-align:-3px;margin-right:3px;"></ons-icon>
                        <ons-icon icon="ion-home" fixed-width="false" style="font-size: 26px; vertical-align: -4px"></ons-icon>
                    </ons-toolbar-button>
                </div>
                <div class="center">Person Name. </div>
                <div class="right">

                    <ons-toolbar-button ng-click="menu.toggleMenu()">
                        <ons-icon icon="ion-android-more-vertical"></ons-icon>
                    </ons-toolbar-button>
                </div>
            </ons-toolbar>
            <ons-list>
                <ons-list-item>
                    Hello. I am Person Name.
                </ons-list-item>
                <ons-list-item>
                    If this page appeared using 'slide' then an error resulted.
                </ons-list-item>
                <ons-list-item>
                    If it appeared using 'fade' then it should still function fine.
                </ons-list-item>
            </ons-list>
        </ons-page>
    </ons-template>
    <ons-template id="search-global.html">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button onclick="myNavigator.popPage();">
                        <ons-icon icon="ion-arrow-left-a" fixed-width="false" style="font-size: 20px;vertical-align:-3px;margin-right:3px;"></ons-icon>
                        <ons-icon icon="ion-home" fixed-width="false" style="font-size: 26px; vertical-align: -4px"></ons-icon>
                    </ons-toolbar-button>
                </div>
                <div class="center">Search People</div>
            </ons-toolbar>
            <ons-list>
                <ons-list-item>
                    <input type="text" placeholder="Enter search text" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
                </ons-list-item>
                <ons-list-item style="padding-bottom:8px;padding-top:5px;">
                    <ons-button modifier="large" onclick="">
                        Search
                    </ons-button>
                </ons-list-item>
            </ons-list>
        </ons-page>
    </ons-template>
</ons-navigator>

我更喜欢使用幻灯片切换，因为我认为它使导航看起来更线性。有谁知道我该如何解决这个错误？

这是 CodePen：http://codepen.io/blarney2000/pen/qZoVzW

Answer 1

基本上就是找不到初始页。如果您只是将滑动菜单包裹在一个页面中就可以了。 Demo

<ons-navigator title="Navigator" var="myNavigator">
  <ons-page>
    <ons-sliding-menu main-page="index.html" menu-page="menu-timeline.html" max-slide-distance="260px" type="push" var="menu">
    </ons-sliding-menu>
  </ons-page>
</ons-navigator>

为什么它只在幻灯片上出问题是个谜，但是Onsen 1的开发已经完成，所以如果它是一个错误那么它不太可能在版本1中被修复。所以解决方案只是把页面和一切都会工作。另外，如果您愿意，可以将导航器放在滑动菜单中（如果您想要的话）。然后你可以有 ons-sliding-menu > ons-navigator > ons-page.

Onsen-UI幻灯片导航错误

Onsen-UI slide navigation error

javascript

navigation

angularjs

onsen-ui