.
107 Ionic Auto Scroll
1) Start with startup codes.
HTML
<html>
<head>
<meta charset="utf-8">
<title>Diary</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<!-- Internal Library
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
-->
<!-- Cloud Library -->
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
<script src="cordova.js"></script>
</head>
<body ng-app="app">
<div>
<div>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
<script id="home.html" type="text/ng-template">
<ion-view title="Home" id="page1">
<ion-content padding="true" class="has-header">
<ion-scroll delegate-handle="autoscrollview" style="height: 100px;">
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
</ion-scroll>
</ion-content>
</ion-view>
</script>
</body>
</html>
|
JS
angular.module('app', ['ionic'])
.controller('homeCtrl', ['$scope','$timeout','$ionicScrollDelegate',
function ($scope,$timeout,$ionicScrollDelegate) {
$scope.items = ['1', '2', '3'];
var counter = $scope.items.slice(-1)[0];
$scope.glued = true;
function addItem(){
$scope.items.push(++counter);
$ionicScrollDelegate.$getByHandle('autoscrollview').scrollBottom();
$timeout(addItem, 1000);
}
$timeout(addItem, 1000);
}])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/page1',
templateUrl: 'home.html',
controller: 'homeCtrl'
})
$urlRouterProvider.otherwise('/page1')
});
|
CODEPEN:
2) Add Demo Codes.
HTML
<html>
<head> <meta charset="utf-8"> <title>Diary</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <!-- Internal Library <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <script src="lib/ionic/js/ionic.bundle.js"></script> --> <!-- Cloud Library --> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> <!-- Needed for Cordova/PhoneGap (will be a 404 during development) --> <script src="cordova.js"></script> </head> <body ng-app="app"> <div> <div> <ion-nav-bar class="bar-stable"> <ion-nav-back-button></ion-nav-back-button> </ion-nav-bar> <ion-nav-view></ion-nav-view> </div> </div> <script id="home.html" type="text/ng-template"> <ion-view title="Home" id="page1"> <ion-content padding="true" class="has-header"> <ion-scroll delegate-handle="autoscrollview" style="height: 100px;"> <ul> <li ng-repeat="item in items">{{item}}</li> </ul> </ion-scroll> </ion-content> </ion-view> </script> </body> </html> |
JS
angular.module('app', ['ionic'])
.controller('homeCtrl', ['$scope','$timeout','$ionicScrollDelegate',
function ($scope,$timeout,$ionicScrollDelegate) {
$scope.items = ['1', '2', '3'];
var counter = $scope.items.slice(-1)[0];
function addItem(){
$scope.items.push(++counter);
$ionicScrollDelegate.$getByHandle('autoscrollview').scrollBottom();
$timeout(addItem, 1000);
}
$timeout(addItem, 1000);
}])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/page1',
templateUrl: 'home.html',
controller: 'homeCtrl'
})
$urlRouterProvider.otherwise('/page1')
});
|
CODEPEN:
DEMO:
.
..
FURTHER READING:
No comments:
Post a Comment