Latest web development tutorials

ionic scrollbar

ion-scroll

ion-scroll is used to create a scrollable container.

usage 

<ion-scroll
	[delegate-handle=""]
	[direction=""]
	[paging=""]
	[on-refresh=""]
	[on-scroll=""]
	[scrollbar-x=""]
	[scrollbar-y=""]
	[zooming=""]
	[min-zoom=""]
	[max-zoom=""]>
	...
</ion-scroll>

API

Attributes Types of Detail
delegate-handle
(Optional)
字符串

The handle use $ionicScrollDelegate designated scroll view.

direction
(Optional)
字符串

The direction of scrolling. 'X' or 'y'. Default 'y'.

paging
(Optional)
布尔值

Paging whether scrolling.

on-refresh
(Optional)
表达式

Call the drop-down refresh by ionRefresher trigger.

on-scroll
(Optional)
表达式

Fires when the user scrolls.

scrollbar-x
(Optional)
布尔值

Whether to display horizontal scroll bar. The default is false.

scrollbar-y
(Optional)
布尔值

Whether to display the vertical scroll bar. The default is true.

zooming
(Optional)
布尔值

It supports two-finger zoom.

min-zoom
(Optional)
整数

The minimum allowable amount of scaling (default is 0.5)

max-zoom
(Optional)
整数

The maximum allowable amount of scaling (default is 3)

Examples

HTML code 

<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
	<div style="width: 5000px; height: 5000px; background: url('../try/demo_source/Europe_geological_map-en.jpg') repeat"></div>
</ion-scroll>

CSS code 

body {
  cursor: url('../try/demo_source/finger.png'), auto;
}

JavaScript code 

angular.module('ionicApp', ['ionic']);

ion-infinite-scroll

When the user reaches the vicinity of the footer or footer, ionInfiniteScroll command allows you to call a function.

When the user scrolls the distance beyond the bottom of the content, it will trigger you to specify the on-infinite.

usage 

<ion-content ng-controller="MyController">
  <ion-infinite-scroll
    on-infinite="loadMore()"
    distance="1%">
  </ion-infinite-scroll>
</ion-content>

function MyController($scope, $http) {
  $scope.items = [];
  $scope.loadMore = function() {
    $http.get('/more-items').success(function(items) {
      useItems(items);
      $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  };

  $scope.$on('stateChangeSuccess', function() {
    $scope.loadMore();
  });
}

When no more data is loaded, you can use a simple method to prevent infinite scroll, that is angular in the ng-if command: 

<ion-infinite-scroll
  ng-if="moreDataCanBeLoaded()"
  icon="ion-loading-c"
  on-infinite="loadMoreData()">
</ion-infinite-scroll>

API

Attributes Types of Detail
on-infinite 表达式

When scrolling in the end portion of the trigger event.

distance
(Optional)
字符串

Scroll from the bottom to trigger on-infinite expressions distance. Default: 1%.

icon
(Optional)
字符串

Icon is displayed when loading. Default: 'ion-loading-d'.

$ IonicScrollDelegate

Authorization control the scroll view (created by ion-content and ion-scroll instruction).

The direct method is triggered $ ionicScrollDelegate service to control all of the scroll view. Control specific scroll view with $ getByHandle methods.

usage 

<body ng-controller="MainCtrl">
  <ion-content>
    <button ng-click="scrollTop()">滚动到顶部!</button>
  </ion-content>
</body>

function MainCtrl($scope, $ionicScrollDelegate) {
  $scope.scrollTop = function() {
    $ionicScrollDelegate.scrollTop();
  };
}

method 

resize()

Tell scroll view to recalculate its container size. 

scrollTop([shouldAnimate])
parameter Types of Detail
shouldAnimate
(Optional)
布尔值

Whether to apply scroll animation. 

scrollBottom([shouldAnimate])
parameter Types of Detail
shouldAnimate
(Optional)
布尔值

Whether to apply scroll animation.