Latest web development tutorials

scrollbar ionik

ion-scroll

ion-scroll digunakan untuk membuat wadah digulir.

pemakaian 

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

API

milik jenis Detil
delegasi-handle
(Opsional)
字符串

Pegangan Penggunaan $ionicScrollDelegate ditunjuk tampilan gulir.

arah
(Opsional)
字符串

Arah bergulir. 'X' atau 'y'. Default 'y'.

paging
(Opsional)
布尔值

Paging apakah bergulir.

on-penyegaran
(Opsional)
表达式

Hubungi drop-down penyegaran oleh ionRefresher pemicu.

on-scroll
(Opsional)
表达式

Kebakaran ketika pengguna gulungan.

scrollbar-x
(Opsional)
布尔值

Apakah akan menampilkan scroll bar horizontal. default adalah palsu.

scrollbar-y
(Opsional)
布尔值

Apakah untuk menampilkan scroll bar vertikal. default adalah benar.

zooming
(Opsional)
布尔值

Mendukung dua jari zoom.

min-zoom
(Opsional)
整数

Jumlah minimum yang diizinkan scaling (default 0.5)

max-zoom
(Opsional)
整数

Jumlah maksimum dari skala (default adalah 3)

contoh

kode HTML 

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

kode CSS 

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

kode JavaScript 

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

ion-tak terbatas-scroll

Ketika pengguna mencapai sekitar footer atau footer, perintah ionInfiniteScroll memungkinkan Anda untuk memanggil fungsi.

Ketika pengguna gulungan jarak di luar bagian bawah konten, itu akan memicu Anda untuk menentukan on-tak terbatas.

pemakaian 

<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();
  });
}

Bila tidak ada lagi data yang dimuat, Anda dapat menggunakan metode sederhana untuk mencegah gulir tak terbatas, yaitu sudut dalam ng-jika perintah: 

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

API

milik jenis Detil
on-tak terbatas 表达式

Ketika bergulir di bagian akhir acara pemicu.

jarak
(Opsional)
字符串

Gulir dari bawah untuk memicu on-terbatas ekspresi jarak. Default: 1%.

icon
(Opsional)
字符串

Ikon ditampilkan ketika loading. Default: 'ion-loading-d'.

$ IonicScrollDelegate

Otorisasi mengontrol tampilan gulir (dibuat oleh ion-konten dan instruksi ion-scroll).

Metode langsung dipicu layanan $ ionicScrollDelegate untuk mengontrol semua tampilan gulir. Mengontrol tampilan gulir tertentu dengan metode $ getByHandle.

pemakaian 

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

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

cara 

resize()

Beritahu gulir untuk menghitung ulang ukuran wadah. 

scrollTop([shouldAnimate])
parameter jenis Detil
shouldAnimate
(Opsional)
布尔值

Apakah untuk menerapkan scroll animasi. 

scrollBottom([shouldAnimate])
parameter jenis Detil
shouldAnimate
(Opsional)
布尔值

Apakah untuk menerapkan scroll animasi.