When the mobile terminal is limited by the screen size and displays a lot of content, some areas need to be swiped. This article shows all the ways in the project. You can choose the appropriate sliding method according to your needs. The basic principle of sliding is that there are two containers A and B. If A is in the outer layer and B is in the inner layer; if A is in the width or height of the outer layer A is fixed, the width or height of the inner layer container B can be rolled.
Implementation method
1). ion-scroll
Use the sliding commands that come with ionic
<ion-view view-title="Dashboard"> <ion-content has-bouncing="false"> <ion-scroll has-bouncing="false" direction="x"> <div> ion-scroll realizes sliding, and uses the sliding component provided by ionic to achieve sliding. For other ion-scroll properties, please refer to the official website document</div> </ion-scroll> </ion-content></ion-view>
2). css' overflow
<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 scroll to implement scrolling, use the overflow attribute of css or scroll to implement scrolling, use the overflow attribute of css or scroll to implement scrolling</div> </div> </ion-content></ion-view>
•overflow:auto If the content is trimmed, the browser displays a scrollbar to view the rest.
•overflow:scroll content will be trimmed, but the browser will display a scrollbar to view the rest.
Note: In this way, ion-content needs to add overflow-scroll="true" directive to indicate that the system's own scrolling is used instead of ionic's scrolling. ionic implements its own set of scrolling methods.
Listen to touch events
<div 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>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)) {//Slide left and right scrollLeft($(this),x); }else if( Math.abs(y) > Math.abs(x)){//Slide up and down scrollTop($(this),y); } function scrollLeft(obj,x){ var currentScroll = obj.scrollLeft(); console.log(parseInt(currentScroll)-x); obj.scrollLeft(parseInt(currentScroll)-x);//Slide distance e.preventDefault(); e.stopPropagation(); } function scrollTop(obj,y){ var currentScroll = obj.scrollTop(); console.log(parseInt(currentScroll)-y); obj.scrollTop(parseInt(currentScroll)-y);//The distance of sliding e.preventDefault(); e.stopPropagation(); } });})By listening to the touchstart and touchmove events of the finger, the sliding distance is obtained, and the scroll bar of the external container div is called to scroll to the corresponding distance.
•$(selector).scrollLeft(position): Set the horizontal scroll position of the element
•$(selector).scrollTop(position): Set the vertical scroll position of the element
Finally, use the angularjs command to encapsulate the scrolling listening into one instruction, which is convenient for use during sliding in the future.
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)) {//Slide left and right scrollLeft($(this),x); }else if( Math.abs(y) > Math.abs(x)){ //Slide up and down scrollTop($(this),y); } function scrollLeft(obj,x){ var currentScroll = obj.scrollLeft(); console.log(parseInt(currentScroll)-x); obj.scrollLeft(parseInt(currentScroll)-x);//The distance of the sliding e.preventDefault(); e.stopPropagation(); } function scrollTop(obj,y){ var currentScroll = obj.scrollTop(); console.log(parseInt(currentScroll)-y); obj.scrollTop(parseInt(currentScroll)-y);//The distance of sliding e.preventDefault(); e.stopPropagation(); } }); } return { restrict: 'A', link: link };});This way, it is convenient to use after encapsulation, and add the instruction my-scroll to the elements that need to be sliding.
<div my-scroll style="border:slateblue solid 1px;width:100%;height:300px;overflow: hidden;margin:0;padding:0;"> <div> <div ng-repeat="d in datas" style="margin-bottom:20px;border:solid 1px #007AFF;height:80px;text-align:center;line-height:80px;"> Region{{d}} </div> </div> <div> <div> <div ng-repeat="d in datas" style="margin-bottom:20px;border:solid 1px #FFC900;height:80px;text-align:center;line-height:80px;"> {{d}}Each line</div> </div> </div></div>The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.