3

ONSEN UIで以下の実装を実現しようとしています。

  1. タブ内のあるタブをタップする。
  2. タップ後、「ng-click="app.navi.pushPage('page.html', { animation : 'lift' });"」と同様にページを下から上にスライドして新ページを表示する。
  3. 新ページはを非表示にする。
  4. 新ページから前ページに戻るときはページを上から下にスライドして前ページに戻る。
  5. 前ページはを表示にする。

画面遷移イメージはinstagramのカメラタブをタップした時(スライドの方向は上下逆ですが)とほぼ同じです。
上記実装をONSEN UIでどのようにすればよろしいでしょうか?

ご存知の方いらっしゃいましたら、ご教授のほどお願いいたします。

1 件の回答 1

1

こんな感じの動作で良いんでしょうか。セレクタを使いたかったのでjQueryを入れてます。

ons.bootstrap()
.controller('AppController', function($scope, $element, $timeout){
  $timeout(function(){
    $scope.tabbar.on('prechange', function(e){
      if(e.index === 1){
        e.cancel();
        $scope.liftPage();
      }
    });
  });
  
  $scope.liftPage = function(){
    $element.find('.upper-page').addClass('show');
  };
  
  $scope.lowerPage = function(){
    $element.find('.upper-page').removeClass('show');
  };
});
.upper-page{
  z-index: 100000;
  background-color: #DDD;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 100%;
  left: 0;
  bottom: 0;
  right: 0;
  transition-duration: 0.4s;
  transition-property: top;
}
.upper-page.show{
  top: 0;
}
.back-button{
  width: 100%;
  position: absolute;
  bottom: 0;
  text-align: center;
}
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/css/onsenui.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/js/onsenui.min.js"></script>

<div ng-controller="AppController">
  
  <ons-tabbar var="tabbar">
    <ons-tab icon="home" label="Home" page="page1.html" active="true"></ons-tab>
    <ons-tab icon="camera" label="Camara"></ons-tab>
    <ons-tab icon="gear" label="Settings" page="page3.html"></ons-tab>
  </ons-tabbar>
  
  <div class="upper-page">
    <h1>Page2.html</h1>
    <div class="back-button">
      <i class="fa fa-4x fa-times" ng-click="lowerPage()"></i>
    </div>
  </div>
  
</div>

<ons-template id="page1.html">
  <ons-toolbar></ons-toolbar>
  <h1>Page1</h1>
</ons-template>

<ons-template id="page3.html">
  <ons-toolbar></ons-toolbar>
  <h1>Page3</h1>
</ons-template>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。