2

今サンプルのプログラムを使っていろいろ試しているところなのですが、
tabbarとカルーセルを組み合わせてメニューを作りたいのです。
イメージ的には最新のlineやカカオみたいな感じなのですが、
可能なのでしょうか?
いろいろ調べているのですが、なかなか見つからなくて・・・・
お手数をおかけしますがよろしくお願いします。

1 件の回答 1

1

意図しているUIのイメージが掴めておらず申し訳ないのですが、
タブの中で複数ページを切り替えたいということでしょうか?

もしそうであれば
タブバーを使う
カルーセルを使う
の組み合わせでいけそうです。

サンプル

ons.bootstrap();
ons-carousel-item {
  display: table;
  text-align: center;
}
.item-label {
  display: table-cell;
  vertical-align: middle;
  color: white;
  line-height: 1;
  font-size: 48px;
  font-weight: bold;
}
.cover-label {
  text-align: center;
  position: absolute;
  left: 0px;
  width: 100%;
  bottom: 10px;
  color: white;
}
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/js/onsenui.min.js"></script>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsenui.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsen-css-components.css" rel="stylesheet"/>

<ons-tabbar>
  	<ons-tab page="home.html" label="Home" icon="ion-home" active="true"></ons-tab>
  <ons-tab page="comments.html" label="Comments" icon="ion-chatbox-working"></ons-tab>
  <ons-tab page="tags.html" label="Tags" icon="ion-ios-pricetag"></ons-tab>
  <ons-tab page="settings.html" label="Settings" icon="ion-ios-cog"></ons-tab>
</ons-tabbar>

<ons-template id="home.html">
  <ons-toolbar>
    <div class="center">Home</div>
  </ons-toolbar>

  <ons-page>
    <ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel">
      <ons-carousel-item style="background-color: gray;">
        <div class="item-label">GRAY</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #085078;">
        <div class="item-label">BLUE</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #373B44;">
        <div class="item-label">DARK</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #D38312;">
        <div class="item-label">ORANGE</div>
      </ons-carousel-item>
      <ons-carousel-cover><div class="cover-label">Swipe left or right</div></ons-carousel-cover>
    </ons-carousel>
  </ons-page>
</ons-template>

<ons-template id="comments.html">
  <ons-toolbar>
    <div class="center">Comments</div>
  </ons-toolbar>
  
  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

<ons-template id="tags.html">
  <ons-toolbar>
    <div class="center">Tags</div>
  </ons-toolbar>
  
  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

<ons-template id="feed.html">
  <ons-toolbar>
    <div class="center">Feed</div>
  </ons-toolbar>
  
  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

<ons-template id="settings.html">
  <ons-toolbar>
    <div class="center">Settings</div>
  </ons-toolbar>
  
  <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
</ons-template>

----- 追記 -----

返信が遅くなり申し訳ありませんでした。
スワイプでタブを切り替えたいということであればons-gesture-detectorを使うのが良さそうです。
ただ、切り替え中もかっこいいアニメーションをさせたいとかだとちょっと難しいような気がします。

ons.bootstrap()
.controller('SwipeCtrl', function($scope) {
  // 検出するスワイプの速さの設定(小さくしたほうがゆっくり)
  Hammer.gestures.Swipe.defaults.swipeVelocityX = 0.01;
  $scope.swipe = function(direction) {
    var index = tab.getActiveTabIndex()
    if (direction === 'left') {
      if (index === 3) return;
      index += 1;
    } else if (direction === 'right') {
      if (index === 0) return;
      index -= 1;
    }
    tab.setActiveTab(index);
  }
})
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsenui.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsen-css-components.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/onsenui.min.js"></script>

<body ng-controller="SwipeCtrl">
  <ons-gesture-detector ng-swipeleft="swipe('left')" ng-swiperight="swipe('right')">
  <ons-tabbar var="tab">
      <ons-tab page="home.html" label="Home" icon="ion-home" active="true"></ons-tab>
    <ons-tab page="comments.html" label="Comments" icon="ion-chatbox-working"></ons-tab>
    <ons-tab page="tags.html" label="Tags" icon="ion-ios-pricetag"></ons-tab>
    <ons-tab page="settings.html" label="Settings" icon="ion-ios-cog"></ons-tab>
  </ons-tabbar>
  </ons-gesture-detector>
</body>

<ons-template id="home.html">
  <ons-toolbar>
    <div class="center">Home</div>
  </ons-toolbar>

  <p style="padding-top: 100px; color: #999; text-align: center">Home Page Contents</p>
  </ons-page>
</ons-template>

<ons-template id="comments.html">
  <ons-toolbar>
    <div class="center">Comments</div>
  </ons-toolbar>
  
  <p style="padding-top: 100px; color: #999; text-align: center">Comment Page Contents</p>
</ons-template>

<ons-template id="tags.html">
  <ons-toolbar>
    <div class="center">Tags</div>
  </ons-toolbar>
  
  <p style="padding-top: 100px; color: #999; text-align: center">Tags Page Contents</p>
</ons-template>

<ons-template id="settings.html">
  <ons-toolbar>
    <div class="center">Settings</div>
  </ons-toolbar>
  
  <p style="padding-top: 100px; color: #999; text-align: center">Settings Page Contents</p>
</ons-template>

2
  • 早速のご回答ありがとうございます。 こんなイメージなのですが、 あとは、 横にスワップするとblue→dark→orangeと変わりますよね。 それと同時にhome→comments→・・と併せて変わっていってほしいのです。 home=blue comments=dark tags=orange と言った感じなのです。。 blueで横にスワイプするとdarkのページが現れると同時に tabもcommentsがアクティブになる。 みたいなイメージなのです。 これは難しいのでしょうか??
    – user8710
    Commented 2015年3月6日 2:17
  • @user8710 だいぶ時間が空いてしまいましたが回答を追記しました。
    – ita_3y
    Commented 2015年4月10日 8:14

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

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