Lorsque le terminal mobile est limité par la taille de l'écran et affiche beaucoup de contenu, certaines zones doivent être glissées. Cet article montre toutes les façons du projet. Vous pouvez choisir la méthode de glissement appropriée en fonction de vos besoins. Le principe de base du glissement est qu'il y a deux conteneurs A et B. Si A est dans la couche externe et B est dans la couche intérieure; Si A est dans la largeur ou la hauteur de la couche externe A est fixe, la largeur ou la hauteur du conteneur de la couche intérieure B peut être roulée.
Méthode d'implémentation
1). vrac à ion
Utilisez les commandes coulissantes qui viennent avec ionic
<ion-View View-Title = "Dashboard"> <ion-content habount-bontcing = "false"> <ion-scroll hasbouning = "false" direction = "x"> <div> ion-scroll se rend glisser et utilise le composant coulissant fourni par ionic pour réaliser le glissement. Pour les autres propriétés de défilement ion, veuillez vous référer au document officiel du site Web </div> </ ion-scroll> </ion-content> </ ion-View>
2). débordement de 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 Faites défiler pour mettre en œuvre le défilement, utilisez l'attribut Overflow de CSS ou faites défiler pour implémenter le défilement, utilisez l'attribut Overflow de CSS ou défilent pour implémenter le défilement, utilisez l'attribut Overflow de CSS ou défilent pour implémenter le défilement </div> </div> </dion-contenu> </ / ion-view>
• débordement: auto Si le contenu est coupé, le navigateur affiche une barre de défilement pour afficher le reste.
• Overflow: le contenu de défilement sera coupé, mais le navigateur affichera une barre de défilement pour afficher le reste.
Remarque: De cette manière, Ion-Cont contenu doit ajouter une directive Overflow-Scroll = "True" pour indiquer que le défilement du système est utilisé à la place du défilement d'Ionic. Ionic implémente son propre ensemble de méthodes de défilement.
Écoutez les événements Touch
<div id = "dash_scroll_container"> <div ng-repeat = "d dans datas" style = "margin-right: 20px; border: solide 1px # ffc900; hauteur: 100%; width: 100px;
JS correspondant
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_contère"); $ domscroll.on ("TouchStart", fonction (e) {startx = e.originalevent.changedtouches [0] .pagex; starty = e.originalevent.changedtouches [0] .pagey; console.log ("start :(" + startx + "," + starty ")" + "-" + $ (this). $ Domscroll.on ("TouchMove", fonction (e) {var x = e.originalevent.changedtouches [0] .pagex-startx; var y = e.originalevent.changedtouches [0] .pagey-starty; if (math.abs (x)> math.abs (y)) {// glissade Math.Abs (Y)> Math.Abs (x)) {// Slice Up and Down ScrollTop ($ (This), Y);} Fonction Scrollft (OBJ, X) {var CurrentScrold = OBJ.Scrollft (); E.PreventDefault (); e.stoppropagation ();}});})En écoutant les événements Touchstart et TouchMove du doigt, la distance coulissante est obtenue et la barre de défilement du div de récipient externe est appelée à faire défiler à la distance correspondante.
• $ (sélecteur) .scrollleft (position): définissez la position de défilement horizontal de l'élément
• $ (sélecteur) .scrolltop (position): définissez la position de défilement vertical de l'élément
Enfin, utilisez la commande angularjs pour encapsuler l'écoute de défilement en une seule instruction, ce qui est pratique pour une utilisation pendant le glissement à l'avenir.
Ajouter une directive.js:
angular.module ('starter.directives', []). directive ('myscroll', function () {function link ($ scope, élément, attrs) {var $ domscroll = $ (élément [0]); var startx = 0, start = 0; $ domscroll.on ("touchstart", fonction (e) {starty = 0; startx = e.originalevent.changedTouches [0] .Pagex; = E.originalevent.changedTouches [0] .Pagex-startx; et Down Scrolltop ($ (ce Fonction ScrollTop (OBJ, Y) {var CurrentScroll = obj.scrolltop (); lien };});De cette façon, il est pratique à utiliser après encapsulation et ajouter l'instruction My-Croll aux éléments qui doivent être glissants.
<Div My-Scroll Style = "Border: SlateBlue Solid 1px; largeur: 100%; hauteur: 300px; surflow: Hidden; margin: 0; padding: 0;"> <div> <div ng-repeat = "d dans datas" style = "margin-bottom: 20px; border: solid 1px # 007Aff; hauteur: 80px; text-adign: Center; line-height: 80px; "> région {{d}} </div> </div> <div> <div> <div ng-repeat =" d dans datas "style =" margin-bottom: 20px; border: solid 1px = # Ffc900; hauteur: 80px; text-align: Center; Line-Height: 80px; "> {{d}} Chaque ligne </div> </div> </div> </div>Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.