Ionic - Hộp trượt JavaScript

Hộp Trang chiếu chứa các trang có thể được thay đổi bằng cách vuốt màn hình nội dung.

Sử dụng Hộp trượt

Việc sử dụng hộp trượt rất đơn giản. Bạn chỉ cần thêmion-slide-box như một vật chứa và ion-slidevới lớp hộp bên trong vùng chứa đó. Chúng tôi sẽ thêm chiều cao và đường viền vào các hộp của chúng tôi để hiển thị tốt hơn.

Mã HTML

<ion-slide-box>

   <ion-slide>
      <div class = "box box1">
         <h1>Box 1</h1>
      </div>
   </ion-slide>

   <ion-slide>
      <div class = "box box2">
         <h1>Box 2</h1>
      </div>
   </ion-slide>

   <ion-slide>
      <div class = "box box3">
         <h1>Box 3</h1>
      </div>
   </ion-slide>

</ion-slide-box>

.box1, box2, box3 {
   height: 300px;
   border: 2px solid blue;
}

Đầu ra sẽ giống như trong ảnh chụp màn hình sau:

Chúng ta có thể thay đổi ô bằng cách kéo nội dung sang bên phải. Chúng ta cũng có thể kéo sang trái để hiển thị hộp trước đó.

Một số thuộc tính có thể được sử dụng để kiểm soát hành vi hộp trang chiếu được đề cập trong bảng sau.

Phương pháp ủy quyền

Thuộc tính	Kiểu	Chi tiết
không tiếp tục	Boolean	Nên trượt vòng lặp hộp khi đến hộp đầu tiên hoặc cuối cùng.
tự chạy	Boolean	Nên hộp trượt tự động trượt.
khoảng thời gian trượt	con số	Giá trị thời gian giữa các trang trình bày tự động thay đổi tính bằng mili giây. Giá trị mặc định là 4000.
show-pager	Boolean	Máy nhắn tin sẽ hiển thị.
bấm máy nhắn tin	biểu hiện	Được gọi khi máy nhắn tin được nhấn (nếu máy nhắn tin hiển thị). $index được sử dụng để phù hợp với các trang trình bày khác nhau.
trên slide-đã thay đổi	biểu hiện	Được gọi khi thay đổi trang chiếu. $index được sử dụng để phù hợp với các trang trình bày khác nhau.
hoạt động trượt	biểu hiện	Được sử dụng như một mô hình để liên kết chỉ mục trang trình bày hiện tại.
ủy quyền	chuỗi	Được sử dụng để nhận dạng hộp trượt với $ionicSlideBoxDelegate.

Đại biểu Hộp trang chiếu

Các $ionicSlideBoxDelegatelà một dịch vụ được sử dụng để điều khiển tất cả các hộp trượt. Chúng ta cần tiêm nó vào bộ điều khiển.

Mã điều khiển

.controller('MyCtrl', function($scope, $ionicSlideBoxDelegate) {
   $scope.nextSlide = function() {
      $ionicSlideBoxDelegate.next();
   }
})

Mã HTML

<button class = "button button-icon icon ion-navicon" ng-click = "nextSlide()"></button>

Bảng sau cho thấy $ionicSlideBoxDelegate các phương pháp.

Phương pháp ủy quyền

phương pháp	Thông số	Kiểu	Chi tiết
slide (tham số1, tham số2)	đến tốc độ	số, số	Tham số to đại diện cho chỉ mục để trượt tới. speed xác định tốc độ thay đổi tính bằng mili giây.
enableSlide (tham số1)	shouldEnable	boolean	Được sử dụng để tráng men hoặc vô hiệu hóa trượt.
trước (tham số1)	tốc độ	con số	Giá trị tính bằng mili giây mà thay đổi sẽ diễn ra.
dừng lại()	/	/	Dùng để dừng trượt.
khởi đầu()	/	/	Dùng để bắt đầu trượt.
currentIndex ()	/	con số	Trả về chỉ mục của slide chữa bệnh.
slidesCount ()	/	con số	Trả về tổng số trang trình bày.
$ getByHandle (tham số1)	xử lý	chuỗi	Được sử dụng để kết nối các phương thức với hộp trượt cụ thể có cùng một tay cầm. $ionicSlideBoxDelegate. $getByHandle('my-handle').start();