เลื่อนไอออนิก
ไอออนเลื่อน
ไอออนเลื่อนใช้ในการสร้างภาชนะเลื่อน
การใช้
<ion-scroll [delegate-handle=""] [direction=""] [paging=""] [on-refresh=""] [on-scroll=""] [scrollbar-x=""] [scrollbar-y=""] [zooming=""] [min-zoom=""] [max-zoom=""]> ... </ion-scroll>
API
| คุณสมบัติ | ชนิด | รายละเอียด |
|---|---|---|
| ผู้รับมอบสิทธิ์จัดการ (อุปกรณ์เสริม) | 字符串 | การใช้มือจับ |
| ทิศทาง (อุปกรณ์เสริม) | 字符串 | ทิศทางของการเลื่อน 'X' หรือ 'Y' เริ่มต้น 'Y' |
| เพจจิ้ง (อุปกรณ์เสริม) | 布尔值 | เพจจิ้งไม่ว่าจะเลื่อน |
| ในการฟื้นฟู (อุปกรณ์เสริม) | 表达式 | โทรรีเฟรชหล่นลงโดย |
| ในการเลื่อน (อุปกรณ์เสริม) | 表达式 | ไฟไหม้เมื่อผู้ใช้เลื่อน |
| scrollbar-X (อุปกรณ์เสริม) | 布尔值 | ว่าจะแสดงแถบเลื่อนแนวนอน เริ่มต้นเป็นเท็จ |
| scrollbar-Y (อุปกรณ์เสริม) | 布尔值 | ว่าจะแสดงแถบเลื่อนแนวตั้ง เริ่มต้นเป็นความจริง |
| ซูม (อุปกรณ์เสริม) | 布尔值 | มันสนับสนุนซูมสองนิ้ว |
| นาทีซูม (อุปกรณ์เสริม) | 整数 | จำนวนเงินที่ต่ำสุดของการปรับ (ค่าปกติคือ 0.5) |
| Max-ซูม (อุปกรณ์เสริม) | 整数 | จำนวนเงินสูงสุดที่อนุญาตของการปรับ (ค่าปกติคือ 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;
}
โค้ด JavaScript
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();
});
}
เมื่อไม่มีข้อมูลที่มากขึ้นมีการโหลดคุณสามารถใช้วิธีง่ายๆในการป้องกันไม่ให้เลื่อนไม่มีที่สิ้นสุดที่เป็นมุมใน NG-ถ้าคำสั่ง:
<ion-infinite-scroll ng-if="moreDataCanBeLoaded()" icon="ion-loading-c" on-infinite="loadMoreData()"> </ion-infinite-scroll>
API
| คุณสมบัติ | ชนิด | รายละเอียด |
|---|---|---|
| บนอนันต์ | 表达式 | เมื่อเลื่อนในส่วนท้ายของเหตุการณ์ทริกเกอร์ |
| ระยะทาง (อุปกรณ์เสริม) | 字符串 | เลื่อนจากด้านล่างที่จะเรียกระยะทางในการแสดงออกที่ไม่มีที่สิ้นสุด เริ่มต้น: 1% |
| ไอคอน (อุปกรณ์เสริม) | 字符串 | ไอคอนจะปรากฏขึ้นเมื่อโหลด เริ่มต้น: 'ไอออนโหลด-D' |
$ 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 (อุปกรณ์เสริม) | 布尔值 | ไม่ว่าจะใช้ภาพเคลื่อนไหวเลื่อน |