ionic实现滑动的三种方式

　　在移动端受屏幕大小所限，展示内容很多的时候，就要使部分区域进行滑动。本文展示项目中所有到的几种方式，大家可以看自己的需求选择合适的滑动方式。实现滑动的基本原理，有两个容器A、B,假如A在外层，B在内层；外层的A宽度或高度固定，内层容器B宽度或者高度大于A即可实现滚动。

实现方式

1）. ion-scroll

利用ionic自带的滑动指令　

  
    
      
 ion-scroll实现滑动，用ionic自带的滑动组件实现滑动，ion-scroll其他属性可参考官网文档
      
    
  

2）. css的overflow

  
    
      
 使用css的overflow属性atuo或者scroll实现滚动，使用css的overflow属性atuo或者scroll实现滚动
 使用css的overflow属性atuo或者scroll实现滚动，使用css的overflow属性atuo或者scroll实现滚动
 使用css的overflow属性atuo或者scroll实现滚动，使用css的overflow属性atuo或者scroll实现滚动
      
    
  

 •overflow:auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
 •overflow:scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
注：使用这种方式，ion-content需要添加overflow-scroll="true"指令，表示使用系统自己的滚动来代替ionic的scroll，ionic是实现了自己的一套滚动方式的。 

 监听touch事件

  
    {{d}}
  

对应的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)) {//左右滑动 
     scrollLeft($(this),x);  
    }else if( Math.abs(y) > Math.abs(x)){//上下滑动
      scrollTop($(this),y);  
    }
    function scrollLeft(obj,x){ 
      var currentScroll = obj.scrollLeft();
      console.log(parseInt(currentScroll)-x);
      obj.scrollLeft(parseInt(currentScroll)-x);//滑动的距离
      e.preventDefault(); 
      e.stopPropagation();
    }
    function scrollTop(obj,y){ 
      var currentScroll = obj.scrollTop();
      console.log(parseInt(currentScroll)-y);
      obj.scrollTop(parseInt(currentScroll)-y);//滑动的距离
      e.preventDefault(); 
      e.stopPropagation();
    }
  });
})

通过监听手指的touchstart、touchmove事件，获得滑动的距离，调用外部容器div的滚动条滚动到对应距离。
•$(selector).scrollLeft(position)：设置元素的水平滚动位置
•$(selector).scrollTop(position)：设置元素的垂直滚动位置

最后，再使用angularjs的指令，讲滚动的监听封装为一个指令，方便以后滑动时候使用。

在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)) {//左右滑动 
scrollLeft($(this),x);  
      }else if( Math.abs(y) > Math.abs(x)){ //上下滑动
 scrollTop($(this),y);  
      }
      function scrollLeft(obj,x){ 
 var currentScroll = obj.scrollLeft();
 console.log(parseInt(currentScroll)-x);
 obj.scrollLeft(parseInt(currentScroll)-x);//滑动的距离
 e.preventDefault(); 
 e.stopPropagation();
      }
      function scrollTop(obj,y){ 
 var currentScroll = obj.scrollTop();
 console.log(parseInt(currentScroll)-y);
 obj.scrollTop(parseInt(currentScroll)-y);//滑动的距离
 e.preventDefault(); 
 e.stopPropagation();
      }
    });
  } 
  return {
    restrict: 'A',
    link: link 
  };
});

这样封装后使用起来就方便了，在需要滑动的元素上加上指令 my-scroll。

   
    
      地区{{d}}
    
  
  
    
      
 {{d}}每行
      
     
  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。