【ionic 1.2】Native Scrolling

どうも中田です。

2015/12/10にionicの1.2が出ました！

http://blog.ionic.io/announcing-ionic-1-2/

というわけで、少しずつ新機能を見ていきたいと思います。

っとその前に

ionic1.2にアップデートする

1.2にアップデートするには bower update でアップデートします。
今、新しくアプリを作ったとしても、勝手に1.2が落ちてくる訳ではないんですね。
(2015/12/15現在)

では、プロジェクトを作るところからいきます。
おなじみの…
ionic start test blank

test プロジェクトができました。
ionicのバージョンを見てみると…

$ ionic lib
Local Ionic version: 1.1.1  (/Users/****/ionic/test/www/lib/ionic/version.json)
Latest Ionic version: 1.1.1  (released 2015-11-05)
 * Local version up to date

バージョンは1.1.1、まだ古い状態です。

つぎに、bower.jsonを編集しましょう。
っと思ったら、、、

{
  "name": "HelloIonic",
  "private": "true",
  "devDependencies": {
    "ionic": "driftyco/ionic-bower#1.2.0"
  }
}

ここは 1.2.0 なんすね。。手間が省けました。

ではアップデートしましょう！

$ bower update

そしてバージョン確認アゲイン

$ ionic lib
Local Ionic version: 1.2.0-nightly-1823  (/Users/****/ionic/test/www/lib/ionic/bower.json)
Latest Ionic version: 1.1.1  (released 2015-11-05)
 * Local version is out of date

バージョン上がりましたね。
これで準備オッケーです。

既に作成済みのプロジェクトに関しては、 bower.json を修正して、updateで問題ないでしょう。

Native Scrolling

ionic1.2 アップデートの一つ目は
2015年5月に登場した Native Scrolling が全てのプラットフォームでデフォルト適用されているといったものです。

今までのデフォルト Javascript Scroll よりパフォーマンス向上された機能です。

とりあえず画像を1000枚表示するサンプルです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="css/ionic.app.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">
    <ion-nav-view></ion-nav-view>
  </body>
</html>

angular.module('starter', ['ionic']).run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider.state('main', {
    url: '/main',
    templateUrl: 'views/main/index.html',
    controller: 'MainCtrl'
  })
  $urlRouterProvider.otherwise('/main');
})
.controller('MainCtrl', function($scope){
  var count=1000;
  $scope.datas = [];
  for(var i=0; i<count; i++) {
    $scope.datas.push("data " + i);
  }
}) ;

<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">Ionic Blank Starter</h1>
  </ion-header-bar>
  <ion-content>
    <div ng-repeat="data in datas">
      <div>
        {{data}}
      </div>
      <div>
        <img ng-src="img/test.jpg" style="width:100%">
      </div>
    </div>
  </ion-content>
</ion-pane>

(test.jpgは適当に。。)

Native Scrolling オフ！もできます。

overflow-scroll=”false” を明示的に指定することで、
Javascript Scrollingが使われるようになります。

<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">Ionic Blank Starter</h1>
  </ion-header-bar>
  <ion-content overflow-scroll="false">
    <div ng-repeat="data in datas">
      <div>
        {{data}}
      </div>
      <div>
        <img ng-src="img/test.jpg" style="width:100%">
      </div>
    </div>
  </ion-content>
</ion-pane>

今日はこんなところで。

ionic1.2にアップデートする

Native Scrolling

Native Scrolling オフ！もできます。

人気の記事

新着記事