ionic实现滑动的三种方式
在移动端受屏幕大小所限，展示内容很多的时候，就要使部分区域进行滑动。本文展示项目中所有到的几种方式，大家可以看自己的需求选择合适的滑动方式。实现滑动的基本原理，有两个容器A、B,假如A在外层，B在内层；外层的A宽度或高度固定，内层容器B宽度或者高度大于A即可实现滚动。
实现方式
1）.ion-scroll
利用ionic自带的滑动指令
<ion-viewview-title="Dashboard"> <ion-contentclass="padding"has-bouncing="false"> <ion-scrollhas-bouncing="false"style="width:100px;border:solid1pxred;"direction="x"> <divstyle="width:200px;"> ion-scroll实现滑动，用ionic自带的滑动组件实现滑动，ion-scroll其他属性可参考官网文档 </div> </ion-scroll> </ion-content> </ion-view>
2）.css的overflow
<ion-viewview-title="Dashboard"> <ion-contentclass="padding"has-bouncing="false"overflow-scroll="true"> <divstyle="width:160px;height:300px;border:solid1pxred;overflow:auto;padding:20px;"> <divstyle="width:400px;height:500px;border:solid1pxblueviolet"> 使用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事件
<divstyle="width:100%;border:solid1px;height:60px;overflow:hidden;white-space:nowrap;padding:10px20px;"id="dash_scroll_container">
<divng-repeat="dindatas"style="margin-right:20px;border:solid1px#FFC900;height:100%;width:100px;display:inline-block;text-align:center;line-height:40px;">
{{d}}
</div>
</div>
对应的js
angular.module('starter.controllers',[])
.controller('DashCtrl',function($scope){
$scope.datas=[1,2,3,4,5,6,7,8,9,10];
varstartX=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){
varx=e.originalEvent.changedTouches[0].pageX-startX;
vary=e.originalEvent.changedTouches[0].pageY-startY;
if(Math.abs(x)>Math.abs(y)){//左右滑动
scrollLeft($(this),x);
}elseif(Math.abs(y)>Math.abs(x)){//上下滑动
scrollTop($(this),y);
}
functionscrollLeft(obj,x){
varcurrentScroll=obj.scrollLeft();
console.log(parseInt(currentScroll)-x);
obj.scrollLeft(parseInt(currentScroll)-x);//滑动的距离
e.preventDefault();
e.stopPropagation();
}
functionscrollTop(obj,y){
varcurrentScroll=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(){
functionlink($scope,element,attrs){
var$domScroll=$(element[0]);
varstartX=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){
varx=e.originalEvent.changedTouches[0].pageX-startX;
vary=e.originalEvent.changedTouches[0].pageY-startY;
if(Math.abs(x)>Math.abs(y)){//左右滑动
scrollLeft($(this),x);
}elseif(Math.abs(y)>Math.abs(x)){//上下滑动
scrollTop($(this),y);
}
functionscrollLeft(obj,x){
varcurrentScroll=obj.scrollLeft();
console.log(parseInt(currentScroll)-x);
obj.scrollLeft(parseInt(currentScroll)-x);//滑动的距离
e.preventDefault();
e.stopPropagation();
}
functionscrollTop(obj,y){
varcurrentScroll=obj.scrollTop();
console.log(parseInt(currentScroll)-y);
obj.scrollTop(parseInt(currentScroll)-y);//滑动的距离
e.preventDefault();
e.stopPropagation();
}
});
}
return{
restrict:'A',
link:link
};
});
这样封装后使用起来就方便了，在需要滑动的元素上加上指令my-scroll。
<divmy-scrollstyle="border:slatebluesolid1px;width:100%;height:300px;overflow:hidden;margin:0;padding:0;"class="row">
<divclass="col-20">
<divng-repeat="dindatas"style="margin-bottom:20px;border:solid1px#007AFF;height:80px;text-align:center;line-height:80px;">
地区{{d}}
</div>
</div>
<divclass="col-80">
<divstyle="width:200%;border:solid1px#009689;overflow:hidden;white-space:nowrap;">
<divng-repeat="dindatas"style="margin-bottom:20px;border:solid1px#FFC900;height:80px;text-align:center;line-height:80px;">
{{d}}每行
</div>
</div>
</div>
</div>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。