ionic实现滑动的三种方式

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

实现方式

1). ion-scroll

利用ionic自带的滑动指令 

<ion-view view-title="Dashboard"> <ion-content has-bouncing="false"> <ion-scroll has-bouncing="false" direction="x"> <div> ion-scroll实现滑动,用ionic自带的滑动组件实现滑动,ion-scroll其他属性可参考官网文档 </div> </ion-scroll> </ion-content> </ion-view>

2). css的overflow

<ion-view view-title="Dashboard"> <ion-content has-bouncing="false" overflow-scroll="true"> <div> <div> 使用css的overflow属性atuo或者scroll实现滚动,使用css的overflow属性atuo或者scroll实现滚动 使用css的overflow属性atuo或者scroll实现滚动,使用css的overflow属性atuo或者scroll实现滚动 使用css的overflow属性atuo或者scroll实现滚动,使用css的overflow属性atuo或者scroll实现滚动 </div> </div> </ion-content> </ion-view>

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

 监听touch事件

<div> <div ng-repeat="d in datas"> {{d}} </div> </div>

对应的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。

<div my-scroll> <div> <div ng-repeat="d in datas"> 地区{{d}} </div> </div> <div> <div> <div ng-repeat="d in datas"> {{d}}每行 </div> </div> </div> </div>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzfjgx.html