Wenn das mobile Terminal durch die Bildschirmgröße begrenzt ist und viele Inhalte anzeigt, müssen einige Bereiche gegriffen werden. Dieser Artikel zeigt alle Wege im Projekt. Sie können die entsprechende Gleitmethode entsprechend Ihren Anforderungen auswählen. Das Grundprinzip des Gleitens ist, dass es zwei Behälter A und B. gibt, wenn A in der äußeren Schicht und B in der inneren Schicht befindet; Wenn a in der Breite oder Höhe der äußeren Schicht A festgelegt ist, kann die Breite oder Höhe des Innenschichtbehälters B gerollt werden.
Implementierungsmethode
1). Ion-Scroll
Verwenden Sie die mit Ionic gelieferten Schieberbefehle
<Ion-View View-Title = "Dashboard"> <ion-content has-bouncing = "false"> <ion-scroll has-bouncing = "false" Direction = "x"> <div> ion-SCROLL realisiert das Gleiten und verwendet die von Ionic bereitgestellte Gleitkomponente, um das Gleiten zu erreichen. Weitere Informationen zu Ion-Scroll-Eigenschaften finden Sie im offiziellen Website-Dokument </div> </ion-scroll> </Ion-Content> </Ion-View>
2). CSS 'Überlauf
<Ion-View View-Title = "Dashboard"> <Ion-Content Has-Buncing = "False" Überlauf-SCROLL = "True"> <div> <div> Verwenden Sie das Überlauf-Attribut von CSS oder Scroll, um Scroll zu implementieren. Scrollen Sie zum Implementieren von Scrolling, verwenden Sie das Überlaufattribut von CSS oder scrollen Sie zum Implementieren von Scrolling, verwenden Sie das Überlaufattribut von CSS oder scrollen Sie zum Implementieren von Scrolling, verwenden Sie das Überlaufattribut von CSS oder Scrollen, um Scrolling </div> </div> </Ion-content> </Ion-View> zu implementieren>
• Überlauf: Automatisch Wenn der Inhalt abgeschnitten ist, zeigt der Browser eine Bildlaufleiste an, um den Rest anzuzeigen.
• Überlauf: Scroll -Inhalte werden abgeschnitten, der Browser zeigt jedoch eine Scrollbar an, um den Rest anzuzeigen.
HINWEIS: Auf diese Weise muss Ionenkonsum über die Überlaufscroll = "True" -Richtlinie hinzufügen, um anzuzeigen, dass das eigene Bildlauf des Systems anstelle von Ionics Scrollen verwendet wird. Ionic implementiert seine eigenen Scroll -Methoden.
Hören Sie sich Touch -Events an
<div id = "Dash_Scroll_Container"> <div ng-Repeat = "D in datas" style = "margin-right: 20px; Border: solide 1px #ffc900; Höhe: 100%; Breite: 100px; Display: Inline-Block; Text-Align: Mitte; Linien- und 40px;
Entsprechende js
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=$("#dash_scroll_container"); $domScroll.on("touchstart",function(e){ startX=e.originalEvent.changedTouches[0].pageX; startY=e.originalEvent.changedTouches[0].pageY; console.log("start:("+startX+","+startY+")"+"--"+$(this).scrollTop()); }); $ domscroll.on ("touchmove", function (e) {var x = e.originaleVent.Changedtouches [0] .pagex-startx; var y = e.originaleVent.ChangedTouches [0]. Seitey-Starty; if (math.abs (x)> math.abs (y) {y) {{y) {/ //. Math.Abs (y)> math.abs (x)) {// STORE SCROLLTOP ($ (this), y); E.PreventDefault (); E.StopPropagation ();}});})Durch das Anhören der Touchstart- und Touchmove -Ereignisse des Fingers wird der Gleitabstand erhalten, und die Bildlaufleiste des externen Container -Divs wird aufgerufen, um zum entsprechenden Abstand zu scrollen.
• $ (Selektor) .ScrollLeft (Position): Stellen Sie die horizontale Bildlaufposition des Elements ein
• $ (Selektor) .Scrolltop (Position): Stellen Sie die vertikale Bildlaufposition des Elements fest
Verwenden Sie schließlich den Befehl AngularJS, um das Scrolling -Hören in einen Anweisungen zu verkapulieren, der für die Verwendung in Zukunft zweckmäßig verwendet wird.
Fügen Sie in Directive.js hinzu:
Angular.module ('Starter.Directives', []). Direktive ('myScroll', function () {Funktionsverbindung ($ Scope, Element, Attrs) {var $ domscroll = $ (Element [0]); var startx = 0, starty = 0; startx = e.originalevent.Changedtouches [0] .Pagex; = E.ORIGNEVENT.Changedtouches [0] .Pagex-Startx; und scrolltop ($ (this), y; Funktionsrolltop (OBJ, y) {var CurrentsCroll = Obj.Scrolltop (); link};});Auf diese Weise ist es zweckmäßig, nach der Kapselung zu verwenden, und fügen Sie die Anweisung zu den Elementen hinzu, die rutschen müssen.
<div my-scroll style = "border: slateblue solid 1px; Breite: 100%; Höhe: 300px; Überlauf: Hidden; Rand: 0; Polster: 0;"> <div> <div ng-repeat = "D in datas" style = "symbontom: culn: midly 1px #007; Region {{d}} </div> </div> <div> <div> <div ng-repeat = "D in datas" style = "margin-bottom: 20px; border: solide 1px #ffc900; Höhe: 80px; text-align; line-height: 80px;Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.