技術

【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>

 
 

今日はこんなところで。

-技術
-, ,

執筆者:


comment

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

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

関連記事

no image

【Angular6】Angularで子コンポーネントから親コンポーネントのメソッドを呼び出す

Angularでアプリを作っている時、子コンポーネントから親コンポーネントのメソ …

Slack Tasker系アプリで絵文字ステータスを自動設定(android 「Automate」)

Slackの絵文字ステータス、皆さん使っているでしょうか? 私は自分の居る場所に …

no image

[Rails]link_toをhelperから使う

こんばんは Railsでviewを作成している時に、helperからlink_t …

no image

[Angular] リアクティブフォームの値をtsファイルで設定する。

こんにちは、コーテッグの小山です。 Angularのリアクティブフォームについて …

no image

【Rails】idのauto increment設定を削除する

こんにちは railsを触っていてidからauto incrementの設定を削 …