技術

【ionic】タブをタップで最上部にスクロール!

投稿日:2015年11月26日 更新日:

どうも、中田です。

今日はタブをタップでトップにゴーの日です。

どういう日かというと、
Facebooアプリとかはタブをタップするとその画面の最上部に移動しますよね。
それをionicアプリでやろうという日です。

ionicで標準タブアプリを作成すると、タブタップはナビゲーションのトップに戻る動きになり、
その画面の最上部に移動する動きにはなりません。

ちなみにナビゲーションのトップと言っているのは、
画面遷移してナビゲーションバーにバックボタンがある画面で、
バックボタンで戻りきった画面、要はタブの初期画面のことを言ってます。

処理の流れとしては、
まずナビゲーションのトップ画面かどうかの判定をします。

  • ナビゲーションのトップ画面の場合
    画面のscrollDelegateを利用してトップにスクロール
  • ナビゲーションのトップ画面でない場合
    クリックイベントを独自処理せずに本来のタブタップとして扱う

というものです。

実際のソースコードはこんな感じ。

<ion-tabs class="tabs-icon-top">

  <!-- Timeline Tab -->
  <ion-tab
    id="tab_timeline"
    title="タイムライン"
    icon="icon-home"
    href="#/tab/timeline"
    ng-click="tab_tap(0, 'tab.timeline')">
    <ion-nav-view name="tab-timeline"></ion-nav-view>
  </ion-tab>

  <!-- Search Tab -->
  <ion-tab
    id="tab_search"
    title="検索"
    icon="icon-search"
    href="#/tab/search"
    ng-click="tab_tap(1, 'tab.search')">
    <ion-nav-view name="tab-search"></ion-nav-view>
  </ion-tab>

  ...(略)

</ion-tabs>

各タブにng-clickを設定しています。
第一引数はタブのindex、第二引数はstate情報です。

angular.module('controllers.tab', [])
.controller('TabCtrl',
  [
    '$scope',
    '$state',
    '$ionicTabsDelegate',
    '$ionicScrollDelegate',
  function(
    $scope,
    $state,
    $ionicTabsDelegate,
    $ionicScrollDelegate) {

  $scope.tab_tap = function(tab_index, selected_tab) {
    if ($state.current.name == selected_tab) {
      // タブトップ→最上部へスクロール
      $ionicScrollDelegate.$getByHandle('content').scrollTop(true);
    } else {
      // タブトップではない→タブをタップしたことを強制的に実現
      $ionicTabsDelegate.select(tab_index);
    }
  }

  ...(略)

tab_tap関数での処理は、
第二引数のstateが今開いている画面のstateと比較して、
タブのトップかどうかを判定しています。

ちなみにタイムラインタブと検索タブのあるアプリの例ですが、
各画面のhtmlにはdelegate-handleを設定しています。

<ion-content delegate-handle="content">

今日はこんな日でした。

-技術
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

[Rails]Deviceのfacebook認証でinvalid_credentials….

こんばんは Deviceでfacebook認証機能を作っていたらinvalid_ …

[Angular6] Angularのユニットテストでprivate変数を読み込む

Angularでテストコードを書いている時、component側で定義しているp …

no image

[wordpress]各固定ページに個別のCSSを読み込ませる

こんばんは wordpreddでオリジナルテーマを作成している時、各固定ページに …

no image

【ionic】Android build Error: Uh oh!(ええとああ!)

どうも中田です。 環境をいろいろとupdateしたら $ionic build …

どうも中田です。 Let’s Encryptって無料だし便利ですよね …