Latest web development tutorials

التمرير الأيونية

ايون التمرير

يستخدم أيون التمرير إلى إنشاء حاوية للتمرير.

استعمال 

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

API

ممتلكات نوع التفاصيل
مندوب مقبض
(اختياري)
字符串

استخدام مقبض $ionicScrollDelegate تعيين عرض التمرير.

اتجاه
(اختياري)
字符串

اتجاه التمرير. 'X' أو 'ذ'. افتراضي 'ذ'.

ترحيل
(اختياري)
布尔值

ترحيل سواء التمرير.

على التحديث
(اختياري)
表达式

استدعاء التحديث المنسدلة التي كتبها ionRefresher الزناد.

على التمرير
(اختياري)
表达式

حرائق عند تمرير المستخدم.

التمرير-X
(اختياري)
布尔值

سواء لعرض شريط التمرير الأفقي. الافتراضي هو زائف.

التمرير ذ
(اختياري)
布尔值

سواء لعرض شريط التمرير العمودي. الافتراضي هو الصحيح.

التكبير
(اختياري)
布尔值

وهو يدعم بإصبعين التكبير.

دقيقة التكبير
(اختياري)
整数

الحد الأدنى المسموح به من التحجيم (الافتراضي هو 0.5)

ماكس التكبير
(اختياري)
整数

كمية الحد الأقصى المسموح به من التحجيم (الافتراضي هو 3)

أمثلة

كود 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>

كود CSS 

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

شفرة جافا سكريبت 

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

ايون انهائي التمرير

عندما يصل المستخدم على مقربة من تذييل الصفحة أو تذييل الصفحة، قيادة ionInfiniteScroll يسمح لك لاستدعاء دالة.

عندما مخطوطات المستخدم المسافة أبعد من الجزء السفلي من المحتوى، وسوف يؤدي لك بتحديد يوم لا نهائية.

استعمال 

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

عندما يتم تحميل أي المزيد من البيانات، يمكنك استخدام طريقة بسيطة لمنع التمرير لانهائي، وهذا هو الزاوي في نانوغرام اذا الأوامر: 

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

API

ممتلكات نوع التفاصيل
على لا نهائية 表达式

عند التمرير في جزء نهاية الحدث الزناد.

بعد
(اختياري)
字符串

انتقل من أسفل إلى تحريك على لا نهائية تعبيرات عن بعد. الافتراضي: 1٪.

رمز
(اختياري)
字符串

يتم عرض رمز عند تحميل. الافتراضي: "ايون تحميل ود.

$ IonicScrollDelegate

إذن التحكم في عرض التمرير (تم إنشاؤه بواسطة ايون المحتوى والتعليم ايون التمرير).

يتم تشغيل الطريقة المباشرة خدمة $ ionicScrollDelegate للسيطرة على كل من وجهة نظر التمرير. تحكم في طريقة التمرير محددة مع أساليب $ getByHandle.

استعمال 

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

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

الطريق 

resize()

أخبر عرض التمرير لإعادة حساب حجم الحاوية الخاصة به. 

scrollTop([shouldAnimate])
المعلمات نوع التفاصيل
shouldAnimate
(اختياري)
布尔值

سواء لتطبيق التمرير الرسوم المتحركة. 

scrollBottom([shouldAnimate])
المعلمات نوع التفاصيل
shouldAnimate
(اختياري)
布尔值

سواء لتطبيق التمرير الرسوم المتحركة.