Ionic - กล่องสไลด์ JavaScript

กล่องสไลด์ประกอบด้วยหน้าที่สามารถเปลี่ยนแปลงได้โดยการปัดหน้าจอเนื้อหา

ใช้ Slide Box

การใช้งานของกล่องสไลด์ทำได้ง่าย คุณเพียงแค่ต้องเพิ่มion-slide-box เป็นภาชนะและ ion-slideด้วยคลาสกล่องภายในภาชนะนั้น เราจะเพิ่มความสูงและเส้นขอบให้กับกล่องของเราเพื่อการมองเห็นที่ดีขึ้น

รหัส 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;
}

ผลลัพธ์จะมีลักษณะดังที่แสดงในภาพหน้าจอต่อไปนี้ -

เราสามารถเปลี่ยนช่องได้โดยลากเนื้อหาไปทางขวา เรายังสามารถลากไปทางซ้ายเพื่อแสดงช่องก่อนหน้านี้

แอตทริบิวต์บางอย่างที่สามารถใช้เพื่อควบคุมลักษณะการทำงานของกล่องสไลด์จะกล่าวถึงในตารางต่อไปนี้

วิธีการมอบหมาย

แอตทริบิวต์ ประเภท รายละเอียด
ไม่ดำเนินการต่อ บูลีน ควรเลื่อนลูปกล่องเมื่อถึงกล่องแรกหรือกล่องสุดท้าย
เล่นอัตโนมัติ บูลีน ควรเลื่อนกล่องเลื่อนโดยอัตโนมัติ
ช่วงเวลาสไลด์ จำนวน ค่าเวลาระหว่างการเปลี่ยนสไลด์อัตโนมัติในหน่วยมิลลิวินาที ค่าดีฟอลต์คือ 4000
แสดงเพจเจอร์ บูลีน เพจเจอร์ควรมองเห็นได้
เพจเจอร์คลิก นิพจน์ เรียกเมื่อเพจเจอร์ถูกแตะ (หากมองเห็นเพจเจอร์ได้) $index ใช้เพื่อจับคู่กับสไลด์ต่างๆ
บนสไลด์เปลี่ยน นิพจน์ เรียกว่าเมื่อสไลด์ถูกเปลี่ยน $index ใช้เพื่อจับคู่กับสไลด์ต่างๆ
ใช้งานสไลด์ นิพจน์ ใช้เป็นแบบจำลองเพื่อผูกดัชนีสไลด์ปัจจุบันเข้ากับ
ผู้แทนจัดการ สตริง ใช้สำหรับระบุกล่องสไลด์ด้วย $ionicSlideBoxDelegate.

ผู้แทนกล่องสไลด์

$ionicSlideBoxDelegateเป็นบริการที่ใช้สำหรับควบคุมกล่องสไลด์ทั้งหมด เราจำเป็นต้องฉีดไปที่คอนโทรลเลอร์

รหัสคอนโทรลเลอร์

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

รหัส HTML

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

ตารางต่อไปนี้แสดง $ionicSlideBoxDelegate วิธีการ

วิธีการมอบหมาย

วิธี พารามิเตอร์ ประเภท รายละเอียด
สไลด์ (พารามิเตอร์ 1 พารามิเตอร์ 2) ถึงความเร็ว ตัวเลขจำนวน พารามิเตอร์ to แสดงถึงดัชนีที่จะเลื่อนไป speed กำหนดว่าการเปลี่ยนแปลงเป็นมิลลิวินาทีเร็วเพียงใด
enableSlide (พารามิเตอร์ 1) shouldEnable บูลีน ใช้สำหรับการพนันหรือปิดการเลื่อน
ก่อนหน้า (พารามิเตอร์ 1) ความเร็ว จำนวน ค่าเป็นมิลลิวินาทีที่ควรใช้ในการเปลี่ยนแปลง
หยุด() / / ใช้เพื่อหยุดการเลื่อน
เริ่มต้น () / / ใช้เพื่อเริ่มการเลื่อน
currentIndex () / จำนวน ส่งกลับดัชนีของสไลด์ Curent
slidesCount () / จำนวน ส่งคืนจำนวนสไลด์ทั้งหมด
$ getByHandle (พารามิเตอร์ 1) ด้ามจับ สตริง ใช้เพื่อเชื่อมต่อวิธีการกับกล่องสไลด์โดยเฉพาะที่มีที่จับเดียวกัน $ionicSlideBoxDelegate. $getByHandle('my-handle').start();