Ionic three ways to realize sliding _javascript skills

When the mobile end is limited by the size of the screen, the display of a lot of time, it is necessary to make some areas to slide. This article shows all of the various ways in the project, you can see their own needs to choose the right way to slide. To achieve the basic principle of sliding, there are two containers a, B, if a is in the outer layer, b in the inner layers, the outer a width or height fixed, inner container B width or height greater than a can achieve scrolling.

Implementation mode

1). Ion-scroll

Using Ionic's own sliding instruction

<ion-view view-title= "Dashboard" >
  <ion-content class= "padding" has-bouncing= "false" >
    < Ion-scroll has-bouncing= "false" style= "Width:100px;border:solid 1px red;" direction= "x" >
      <div style= "width : 200px; " >
        ion-scroll Implementation of sliding, with ionic sliding components to achieve sliding, ion-scroll other properties can refer to official website documents
      </div>
    </ion-scroll>
  </ion-content>
</ion-view>

2). Overflow of CSS

<ion-view view-title= "Dashboard" > <ion-content class= "padding" "has-bouncing="
  false "Overflow-scroll=" True ">
    <div style=" Width:160px;height:300px;border:solid 1px red;overflow:auto;padding:20px; >
      <div style= "width:400px;height:500px;border:solid 1px blueviolet" >
        Use the CSS overflow property atuo or scroll to implement scrolling, using the CSS overflow properties atuo or scroll implementation scrolling
        using the CSS overflow properties atuo or scroll implementation scrolling, Use the CSS overflow property atuo or scroll implementation scrolling
        using the overflow properties of CSS Atuo or scroll implementation scrolling, using the CSS overflow properties atuo or scroll implementation scrolling
      </div>
    </div>
  </ion-content>
</ion-view>

Overflow:auto If the content is trimmed, the browser displays a scroll bar to view the rest of the content.
The overflow:scroll content is trimmed, but the browser displays a scroll bar to view the rest of the content.
Note: In this way, ion-content needs to add the overflow-scroll= "true" instruction, which means that using the system's own scrolling to replace the Ionic scroll,ionic is a set of rolling methods.

Monitor Touch events

<div style= "Width:100%;border:solid 1px;height:60px;overflow:hidden;white-space:nowrap;padding:10px 20px;" Id= " Dash_scroll_container ">
  <div ng-repeat=" D in Datas "style=" Margin-right:20px;border:solid 1px #FFC900; height:100%;width:100px;display:inline-block;text-align:center;line-height:40px; " >
    {d}}
  </div>
</div>

The corresponding 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].pagey-starty;  
    if (Math.Abs (x) > Math.Abs (y)) {//Left sliding scrollleft ($ (this), x);  
    }else if (Math.Abs (y) > Math.Abs (x)) {//Up and down ScrollTop ($ (this), y);
      function ScrollLeft (obj,x) {var currentscroll = Obj.scrollleft ();
      Console.log (parseint (Currentscroll)-X); 
      Obj.scrollleft (parseint (Currentscroll)-X);//sliding distance e.preventdefault ();
    E.stoppropagation (); } function ScrollTop (obj,y) {var currentscroll = Obj.scrolltop ();
      Console.log (parseint (currentscroll)-y); 
      Obj.scrolltop (parseint (currentscroll)-y),//Sliding distance e.preventdefault ();
    E.stoppropagation ();
}
  });
 })

By monitoring the Touchstart and touchmove events of the fingers, get the sliding distance, and call the outer container div's scroll bar to scroll to the corresponding distance.
$ (selector). ScrollLeft (position): Setting the horizontal scrolling position of an element
$ (selector). scrolltop (position): Setting the vertical scrolling position of an element

Finally, using the angularjs instruction, the scrolling listener is encapsulated as an instruction, which is convenient to use later when sliding.

Add in Directive.js:

Angular.module (' starter.directives ', []). directive (' Myscroll ', function () {function link ($scope, element, Attrs) {
    var $domScroll =$ (element[0]);
    var startx=0,starty=0;
      $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].pagey-starty;  
      if (Math.Abs (x) > Math.Abs (y)) {//Left sliding scrollleft ($ (this), x);  
      }else if (Math.Abs (y) > Math.Abs (x)) {//Up and down ScrollTop ($ (this), y);
        function ScrollLeft (obj,x) {var currentscroll = Obj.scrollleft ();
        Console.log (parseint (Currentscroll)-X); 
        Obj.scrollleft (parseint (Currentscroll)-X);//sliding distance e.preventdefault (); E.stoppropagatioN ();
        function ScrollTop (obj,y) {var currentscroll = Obj.scrolltop ();
        Console.log (parseint (currentscroll)-y); 
        Obj.scrolltop (parseint (currentscroll)-y),//Sliding distance e.preventdefault ();
      E.stoppropagation ();
  }
    });
Return {restrict: ' A ', link:link};

 });

This is easy to use after encapsulation, with instructions my-scroll on the elements that need to be slid.

<div my-scroll style= "Border:slateblue solid 1px;width:100%;height:300px;overflow:hidden;margin:0;padding:0;" class= "Row" >
  <div class= "col-20" > 
    <div ng-repeat= "D in Datas" style= "Margin-bottom:20px;border: Solid 1px #007AFF; height:80px;text-align:center;line-height:80px; " >
      area {{d}}
    </div>
  </div>
  <div class= "col-80 >
    <div style=" width:200%; Border:solid 1px #009689; overflow:hidden;white-space:nowrap; " >
      <div ng-repeat= "D in Datas" style= "Margin-bottom:20px;border:solid 1px #FFC900 height:80px;text-align: center;line-height:80px; " >
        {d}} per line
      </div>
     </div>
  </div>
</div>

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.