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

投稿日：2015年11月26日更新日：2015年11月27日

どうも、中田です。

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

どういう日かというと、
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を設定しています。