ionic实现滑动的三种方式
更新时间：2016年08月27日 15:34:45 作者：lishihong108
这篇文章主要为大家详细介绍了ionic实现滑动的三种方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
在移动端受屏幕大小所限，展示内容很多的时候，就要使部分区域进行滑动。本文展示项目中所有到的几种方式，大家可以看自己的需求选择合适的滑动方式。实现滑动的基本原理，有两个容器A、B,假如A在外层，B在内层；外层的A宽度或高度固定，内层容器B宽度或者高度大于A即可实现滚动。
实现方式
1）. ion-scroll
利用ionic自带的滑动指令
<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实现滑动，用ionic自带的滑动组件实现滑动，ion-scroll其他属性可参考官网文档
</div>
</ion-scroll>
</ion-content>
</ion-view>
2）. css的overflow
<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">
使用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 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>
对应的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 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;">
地区{{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}}每行
</div>
</div>
</div>
</div>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
tab选项卡效果就是当我指上或经过时就会显示这个选项卡下面的内容，下面我来给大家介绍一款纯js实现的TAB选项卡效果，有需要的朋友可以参考一下2013-08-08
我们不得面对这样一个事实：许多程序员不会规划他们的JS代码。我们经常快速写完代码、运行、提交。但当我们继续开发遇到变量和函数时不得不再次回头查看它们代表的含义，麻烦就从这里开始了。2013-04-04
下面小编就为大家带来一篇promise处理多个相互依赖的异步请求(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
这篇文章主要介绍了 JavaScript 实现自己的安卓手机自动化工具脚本,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-05-05
这篇文章主要介绍了小程序如何定位所在城市及发起周边搜索，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了微信小程序实现点击卡片 翻转效果本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
JavaScript是一种功能强大的编程语言，具有许多高级特性，本文将介绍JavaScript中的一些高级特性，包括闭包、原型继承、高阶函数、异步编程和模块化，希望对大家有所帮助2023-06-06
这篇文章主要介绍了JS版元素周期表实现方法,可实现基于javascript动态生成元素周期表的功能,点击元素项可以在下方显示对应元素的各种常用属性,需要的朋友可以参考下2015-08-08
本篇文章主要是对JS中设置readOnly值的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
还在一味没有目的的编写JavaScript代码吗？那么你就OUT了！让我们一起来看看小编为大家搜罗的JavaScript开发人员应该具备的十大关键习惯吧2014-12-12
最新评论