สามวิธีในการเลื่อนในไอออนิก

เมื่อเทอร์มินัลมือถือถูก จำกัด ด้วยขนาดหน้าจอและแสดงเนื้อหาจำนวนมากบางพื้นที่จำเป็นต้องกวาด บทความนี้แสดงวิธีการทั้งหมดในโครงการ คุณสามารถเลือกวิธีการเลื่อนที่เหมาะสมตามความต้องการของคุณ หลักการพื้นฐานของการเลื่อนคือมีสองภาชนะ A และ B หาก A อยู่ในชั้นนอกและ B อยู่ในชั้นด้านใน หาก A อยู่ในความกว้างหรือความสูงของชั้นนอก A ได้รับการแก้ไขความกว้างหรือความสูงของภาชนะชั้นในสามารถรีดได้

วิธีการดำเนินการ

1). ครอสต์ไอออน

ใช้คำสั่งเลื่อนที่มาพร้อมกับไอออนิก

 <ion-view view-title = "Dashboard"> <ion-content hade-bouncing = "false"> <ion-scroll hast hade = "false" direction = "x"> <div> ion-scroll ตระหนักถึงการเลื่อนและใช้ส่วนประกอบเลื่อนที่จัดทำโดยไอออนิก สำหรับคุณสมบัติอื่น ๆ ของไอออน-สโคปโปรดดูเอกสารเว็บไซต์อย่างเป็นทางการ </div> </ion-scroll> </ion-content> </ion-view>

2). CSS 'ล้น

 <ion-view view-title = "Dashboard"> <ion-content has-buncing = "false" overflow-scroll = "true"> <div> <div> ใช้แอตทริบิวต์ล้นของ CSS หรือสกรอลล์เพื่อใช้การเลื่อน เลื่อนเพื่อใช้การเลื่อนใช้แอตทริบิวต์ล้นของ CSS หรือเลื่อนเพื่อใช้การเลื่อนใช้แอตทริบิวต์ล้นของ CSS หรือเลื่อนเพื่อใช้การเลื่อนใช้แอตทริบิวต์ล้นของ CSS หรือเลื่อนเพื่อใช้การเลื่อน

•ล้น: อัตโนมัติหากมีการตัดแต่งเนื้อหาเบราว์เซอร์จะแสดงแถบเลื่อนเพื่อดูส่วนที่เหลือ

•ล้น: เนื้อหาเลื่อนจะถูกตัดแต่ง แต่เบราว์เซอร์จะแสดงแถบเลื่อนเพื่อดูส่วนที่เหลือ

หมายเหตุ: ด้วยวิธีนี้ Ion-Content จำเป็นต้องเพิ่มคำสั่ง Overflow-Scroll = "True" เพื่อระบุว่าการเลื่อนของระบบนั้นใช้แทนการเลื่อนของ Ionic Ionic ใช้ชุดวิธีการเลื่อนของตัวเอง

ฟังกิจกรรม Touch

 <div id = "dash_scroll_container"> <div ng-repeat = "d ใน datas" style = "margin-right: 20px; border: solid 1px #ffc900; ความสูง: 100%; Width: 100px;

JS ที่สอดคล้องกัน

 Angular.Module ('Starter.Controllers', []). คอนโทรลเลอร์ ('dashctrl', ฟังก์ชั่น ($ scope) {$ scope.datas = [1,2,3,4,5,6,7,8,8,9,10]; var startx = 0, starty = 0; var $ domscroll = $ ( $ domscroll.on ("touchstart", ฟังก์ชั่น (e) {startx = e.originalevent.changedtouches [0] .pagex; starty = e.originalevent.changedTouches [0] $ domscroll.on ("touchmove", ฟังก์ชั่น (e) {var x = e.originalevent.changedTouches [0] .pagex-startx; var y = e.originalevent.changedTouches [0] Math.Abs (y)> math.abs (x)) {// เลื่อนขึ้นและลง scrolltop ($ (นี่), y); E.PreventDefault (); E.StopPropagation ();}});})

ด้วยการฟังเหตุการณ์ TouchStart และ Touchmove ของนิ้วของคุณคุณสามารถรับระยะการเลื่อนและโทรไปที่แถบเลื่อนของคอนเทนเนอร์ภายนอก DIV เพื่อเลื่อนไปยังระยะทางที่สอดคล้องกัน

• $ (ตัวเลือก). scrollleft (ตำแหน่ง): ตั้งตำแหน่งการเลื่อนแนวนอนขององค์ประกอบ

• $ (ตัวเลือก) .scrolltop (ตำแหน่ง): ตั้งค่าตำแหน่งการเลื่อนแนวตั้งขององค์ประกอบ

ในที่สุดใช้คำสั่ง AngularJS เพื่อห่อหุ้มการฟังการเลื่อนลงในคำสั่งเดียวซึ่งสะดวกสำหรับการใช้งานระหว่างการเลื่อนในอนาคต

เพิ่มใน directive.js:

 Angular.module ('Starter.directives', []). Directive ('MyScroll', function () {function link ($ scope, องค์ประกอบ, attrs) {var $ domscroll = $ (องค์ประกอบ [0]); var startx = 0, starty = 0; $ domscroll.on ( startx = e.originalevent.changedTouches [0] .pagex; E.Originalevent.changedTouches [0] .Pagex-Startx; down scrolltop ($ (this), y); Scrolltop (obj, y) {var currentscroll = obj.scrolltop (); -

ด้วยวิธีนี้มันสะดวกที่จะใช้หลังจากการห่อหุ้มและเพิ่มคำสั่งของฉัน-ครอลลงในองค์ประกอบที่ต้องเลื่อน

 <Div My-Scroll Style = "Border: SlateBlue Solid 1px; Width: 100%; ความสูง: 300px; overflow: ซ่อน; ระยะขอบ: 0; padding: 0;"> <div> <div ng-repeat = "d ใน datas" style = "margin-bottom: 20px; ภูมิภาค {{d}} </div> </div> <div> <div> <div ng-repeat = "d ใน datas" style = "margin-bottom: 20px; border: solid 1px #ffc900; ความสูง: 80px;

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น