Ketika terminal seluler dibatasi oleh ukuran layar dan menampilkan banyak konten, beberapa area perlu digesek. Artikel ini menunjukkan semua cara dalam proyek. Anda dapat memilih metode geser yang sesuai sesuai dengan kebutuhan Anda. Prinsip dasar geser adalah bahwa ada dua wadah A dan B. Jika A berada di lapisan luar dan B berada di lapisan dalam; Jika A berada dalam lebar atau tinggi lapisan luar A dipasang, lebar atau tinggi wadah lapisan dalam B dapat digulung.
Metode implementasi
1). gulir ion
Gunakan perintah geser yang datang dengan ionik
<ion-view view-title = "dashboard"> <ion-content have-bouncing = "false"> <ion-scroll have-bouncing = "false" Direction = "x"> <v> ion-scroll menyadari geser, dan menggunakan komponen geser yang disediakan oleh Ionic untuk mencapai geser. Untuk properti ion-scroll lainnya, silakan merujuk ke dokumen situs web resmi </div> </ion-scroll> </ion-content> </ion-view>
2). Overflow CSS
<ion-view view-title="Dashboard"> <ion-content has-buncing="false" overflow-scroll="true"> <div> <div> Use the overflow attribute of css or scroll to implement scroll, use the overflow attribute of css or scroll to implement scrolling, use the overflow attribute of css or scroll to implement scrolling, use the overflow attribute of css or Gulir untuk mengimplementasikan gulir, gunakan atribut overflow dari CSS atau gulir untuk mengimplementasikan gulir, gunakan atribut overflow CSS atau gulir untuk mengimplementasikan gulir, gunakan atribut overflow dari CSS atau gulir untuk mengimplementasikan </Div> </div> </ion-Content> </ion-view> </Div> </div> </ion-Content> </ion-view>> view>> view>> view>> view>> view>> view>> view>> view>> view>> view>> view>> view>> view>> view>> view>> view>> view>> view>> view>> view>> view>> view>> view>> </ion-view>> </ion-view>>
• Overflow: Otomatis Jika konten dipangkas, browser menampilkan scrollbar untuk melihat sisanya.
• Overflow: Konten gulir akan dipangkas, tetapi browser akan menampilkan scrollbar untuk melihat sisanya.
Catatan: Dengan cara ini, konten ion perlu menambahkan overflow-scroll = arahan "true" untuk menunjukkan bahwa pengguliran sistem sendiri digunakan sebagai gulungan ionik. Ionic mengimplementasikan rangkaian metode penggulirannya sendiri.
Dengarkan Acara Sentuh
<Div id = "dash_scroll_container"> <div ng-repeat = "d dalam data" style = "margin-right: 20px; border: solid 1px #ffc900; tinggi: 100%; lebar: 100px; display: inline-block; text-align: center; line-height: 40px;"> {do-{do {center; line-height: 40px; "> {{do {center; line-height: 40px;"> {{text-{do {center; center; line-height: 40px; "> {text-block; center; line-height: 40px;"JS yang sesuai
angular.module ('starter.controllers', []). controller ('dashctrl', function ($ scope) {$ scope.datas = [1,2,3,4,5,6,7,8,9,10]; var startx = 0, starty = 0; var $ domscroll = $ ("#scroll var = 0, starty = 0; var $ domscroll = $ (" #scroll =scroll = 0 $ domscroll.on ("touchstart", function (e) {startx = e.originalevent.changedtouches [0] .pagex; starty = e.originalEvent.ChangedTouches [0] .page; console.log ("Mulai :("+startx+","+starty+")") ("ini (" Mulai: "+startx+", "+") (" $domScroll.on("touchmove",function(e){ var x = e.originalEvent.changedTouches[0].pageX-startX; var y = e.originalEvent.changedTouches[0].pageY-startY; if ( Math.abs(x) > Math.abs(y)) {//Slide left and right scrollLeft($(this),x); }else if( Math.abs (y)> math.abs (x)) {// geser ke atas dan ke bawah scrolltop ($ (ini), y); E.PreventDefault (); E.StopPropagation ();}});})Dengan mendengarkan peristiwa TouchStart dan TouchMove dari jari, jarak geser diperoleh, dan bilah gulir div wadah eksternal dipanggil untuk menggulir ke jarak yang sesuai.
• $ (pemilih) .scrollleft (posisi): Atur posisi gulir horizontal dari elemen
• $ (pemilih) .scrolltop (posisi): Atur posisi gulir vertikal dari elemen
Akhirnya, gunakan perintah AngularJS untuk merangkum pendengaran gulir ke dalam satu instruksi, yang nyaman untuk digunakan selama meluncur di masa depan.
Tambahkan Directive.js:
angular.module ('starter.directives', []). Directive ('myscroll', function () {function link ($ scope, element, attrs) {var $ domscroll = $ (elemen [0]); var startx = 0, starty = 0; $ domscroll.on ("touchstart", function (e) {$ domscroll.on ("touchstart", function (e) {$ domscroll.on ("touchstart", function (e) {$ domscroll.on ("Touchstart", function (e) {$ domscrol. startx = e.originalEvent.ChangedTouches [0] .PAGEX; = E.OriginalEvent.ChangedTouches [0] .pagex-startx; dan fungsi scrollft (obj, x) {var arus croll = obj.scrollleft () console.log (ParseInt (Currentscroll); Fungsi Scrolltop (OBJ, Y) {Var Currentscroll = Obj.scrolltop (); tautan};});Dengan cara ini, lebih mudah digunakan setelah enkapsulasi, dan menambahkan instruksi-gulir saya ke elemen-elemen yang perlu digeser.
<Div my-scroll style = "Border: SlateBlue Solid 1px; Lebar: 100%; Tinggi: 300px; overflow: tersembunyi; margin: 0; padding: 0;"> <Div> <div ng-repeat = "d dalam data" style = "margin-bottom: 20px; border: solid 1px #007aft; Region {{d}} </div> </div> <div> <div> <div ng-repeat = "d dalam data" style = "margin-bottom: 20px; border: solid 1px #ffc900; tinggi: 80px; Text-align: line-line-height: 80px;"> {d {D} </div </line-height: 80px; "> {D {d} </Dive </div </line-height: 80px;"> {d {d}} </div </line-height: 80px; "> {d {d}} setiap div <line-height: 80px;"> {{d} {do/{do/div </line-height;Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.