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