Onsen-UIのスライドナビゲーションエラー

「スライド」トランジションを使用してperson.htmlページに移動すると、「ons-page要素からPageViewをフェッチできません」というエラーが表示されます。Onsen-UIのスライドナビゲーションエラー

「スライド」から「フェード」への移行を変更してもエラーは発生しません。

<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

出典

2016-04-14 Victor Stoddard

は、基本的にはちょうど最初のページを見つけることができません。スライディングメニューをページ内にラップするだけであれば問題ありません。 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>

にそれが唯一のスライドのバグ出し謎の一種ですが、温泉1の開発はすでに完成しているので、それはバグだならば、とてもバージョン1で修正される可能性が非常に高いではありませんなぜソリューションは単にページに置かれ、すべてが機能します。また、必要ならスライダーメニュー内にナビゲーターを置くこともできます。その後、ons-sliding-menu > ons-navigator > ons-pageにすることができます。

出典

2016-04-14 06:36:00

ありがとう、Ilia。これはうまくいった。私はまだ複数のスライディングメニューを持っていることに懸念があります（複数のナビゲータを意味するでしょうか？）。しかし、私は未来に取り組んでいきます。 –

それはちょうどあなたが望むものに依存します。私はすべての場合、おそらく外側の要素のうち1つだけを使用し、内側の要素は潜在的に多く使うことができると思います。ページ内に異なるスライドメニューが必要な場合は、ナビゲータが外にあり、多くのメニューを持つことができます。しかし、私はあなたがすべてのページのスライドメニューを1つだけ望むと思う。その場合は、スライディングメニューのメインページにスライドメニューとナビゲータがあります。そこから、ナビゲータのメソッドを使うことができます。あなたは1つのスライドメニュー、1つのナビゲータ、そして多くのページをナビゲータ内に持っています。 –

Onsen-UIのスライドナビゲーションエラー

答えて

関連する問題