解决Android下元素滑动问题
移动端左右、上下滑动:
当页面中既需要页面滑动操作,又需要上下或左右滑动页面上的某个元素时,直接使用zepto中提供的swipe事件是不能直接达到目的的,原因如下:
(1)在Android低端机上touchEnd会不被触发。
(2)zepto中的swipe 事件通过 事件冒泡机制实现事件监听
在document上统一监听touchstart、 touchmove、 touchend, 然后判断是上下滑动还是左右滑动。 再判断document的touch事件是由哪个元素上的touch事件冒泡上来的, 再触发该元素上的滑动事件。
直接在某个元素上绑定swipe事件,会冒泡至body上,如果是上下滑动会触发页面滚动,导致在滑动元素的时候页面也在滚动。
滑动事件触发过程:
(1)IOS 上 当触发 "swipe"时, 依次产生如下事件: touchstart - > touchmove * 多次 - > touchend - > scroll
(2)Android4.x上touchend不触发-- > touchmove时, 阻止默认事件, touchend才会被触发
touchstart - > touchmove - > touchcancel - > scroll * 多次
并且在Android低版本上还会出现单击一下,会有位移差的现象。
所以,通过下面脚本重写swipe事件,解决上面的问题。
/**
* 滑动事件 Android 4.0 will not fire touchend event
*/
define(function(require,exports,module){ function SwipeEvent(selector){
this.selector = selector;
this.swipeLeftCallback = function(){};
this.swipeRightCallback = function(){};
this.swipeUpCallback = function(){};
this.swipeDownCallback = function(){};
this._initSwipe(selector);
}
SwipeEvent.prototype.bind = function(evtName,callback){
switch(evtName){
case "swipeLeft":
this.swipeLeftCallback = callback;
break;
case "swipeRight":
this.swipeRightCallback = callback;
break;
case "swipeUp":
this.swipeUpCallback = callback;
break;
case "swipeDown":
this.swipeDownCallback = callback;
break;
}
};
SwipeEvent.prototype._initSwipe = function(selector){
var self = this;
var startX, startY;
var endX, endY;
var distanceX, distanceY;
$(selector).on('touchstart', function(event) {
startX = event.targetTouches[0].clientX; //位于当前DOM元素上手指的列表。
startY = event.targetTouches[0].clientY;
}).on("touchmove",function(event){
endX = event.changedTouches[0].clientX;
endY = event.changedTouches[0].clientY; //涉及当前事件手指的列表。
distanceX = Math.abs(startX - endX);
distanceY = Math.abs(startY - endY);
if(distanceX > 1 || distanceY > 1){ //判断是左右滑动或上下滑动,阻止默认事件 使android4 touchend生效
event.preventDefault();
}
event.stopPropagation();
}).on('touchend', function(event) {
endX = event.changedTouches[0].clientX;
endY = event.changedTouches[0].clientY;
distanceX = Math.abs(startX - endX);
distanceY = Math.abs(startY - endY);
if(distanceX > 10 || distanceY > 10){ //安卓4.X里,单击一次也会产生位移差
if (distanceX >= distanceY) { //左右滑动
if(startX - endX > 0){
self.swipeLeftCallback(event);
}else if(startX - endX < 0){
self.swipeRightCallback(event);
}
}else{
if(startY - endY > 0){
self.swipeUpCallback(event);
}else if(startY - endY < 0){
self.swipeDownCallback(event);
}
}
}
});
};
module.exports = SwipeEvent;
});
参考:http://www.cnblogs.com/ytu2010dt/p/5767491.html
http://www.myexception.cn/web/1874295.html
解决Android下元素滑动问题的更多相关文章
- 有关ViewPager的使用及解决Android下ViewPager和PagerAdapter中调用notifyDataSetChanged失效的问题
ViewPager是android-support-v4.jar包中的一个系统控件,继承自ViewGroup,专门用以实现左右滑动切换View的效果,使用时需要首先在Project->prope ...
- Android 解决Gallery下ScrollView滑动事件冲突
在Gallery下,里面内容过长超出屏幕,这时我们可以用ScrollView来滚动,但是这样做了以后,会发现一个问题,Gallery的滑动事件和ScrollView的滑动事件起冲突,这时我们可以自定义 ...
- ios下元素溢出设置 overflow:auto; 不能滑动解决办法
ios下元素溢出设置 overflow:auto; 不能滑动解决办法: overflow:auto; overflow-y:scroll; -webkit-overflow-scrolling:tou ...
- 移动web在ios和android下点击元素出现阴影问题
移动web开发经验总结 1.-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影.备注:transp ...
- 如何解决ADT17下Android第三方jar包NoClassDefFoundError的错误
转自:http://blog.csdn.net/huzgd/article/details/7604069本人已试过第二种解决方法可行!! 原文:Posted by Foxykeep on 22/03 ...
- 解决IE8下opacity属性失效问题,无法隐藏元素
解决IE8下opacity属性失效问题 由于opacity属性存在兼容性问题,所以在IE8下,用opacity来设置元素的透明度,会失效,从而导致页面的样式问题.在IE8及其更早的浏览器下,我们可 ...
- Android NestedScrolling嵌套滑动机制
Android NestedScrolling嵌套滑动机制 最近项目要用到官网的下拉刷新SwipeRefreshLayout,它是个容器,包裹各种控件实现下拉,不像以前自己要实现事件的拦截,都是通过对 ...
- Android View的滑动
Android View的滑动 文章目录 Android View的滑动 一.实现移动 1.1 layout() 1.2 设置位置偏移量 1.3 改变布局参数 1.4 动画 1.5 ScrollTo以 ...
- CSharp程序员学Android开发---3.Android内部元素不填充BUG
最近公司组织项目组成员开发一个Android项目的Demo,之前没有人有Andoid方面的开发经验,都是开发C#的. 虽说项目要求并不是很高,但是对于没有这方面经验的人来说,第一步是最困难的. 项目历 ...
随机推荐
- 基于React Native的移动平台研发实践分享
转载:http://blog.csdn.net/haozhenming/article/details/72772787 本文目录: 一.React Native 已经成为了移动前端技术的趋势 二.基 ...
- Qt学习之路MainWindow学习过程中的知识点
一.Qt的GUI程序有一个常用的顶层窗口,叫做MainWindow MainWindow继承自QMainWindow.QMainWindow窗口分成几个主要的区域: 二.QAction类 QAct ...
- 《effective Go》读后记录
一个在线的Go编译器 如果还没来得及安装Go环境,想体验一下Go语言,可以在Go在线编译器 上运行Go程序. 格式化 让所有人都遵循一样的编码风格是一种理想,现在Go语言通过gofmt程序,让机器来处 ...
- Longge's problem poj2480 欧拉函数,gcd
Longge's problem Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 6918 Accepted: 2234 ...
- End up with More Teams UVA - 11088
End up with More Teams Time Limit: 3000MS Memory Limit: Unknown 64bit IO Format: %lld & %llu ...
- jQuery ajax的提交
1.利用jQuery中的aja提交数据,首先引入jQuery中的文件 2.jquery.form.js下载地址:http://vdisk.weibo.com/s/thY_x31gX0M-p?categ ...
- VB.net DateTimePicker 初始化为空,选择后显示日期
目的:当某记录的日期数据为空的时候,DateTimePicker 不以默认当前时间显示. 优点:避免不规则的时间格式输入:符合平时遇到的时间输入习惯 缺点:设置要代码,没有textbox控件那么方便设 ...
- 程序员网站开发时应该注意的SEO问题
一.链接的统一性 搜索引擎排名最主要的因素就是网站内容和链接,假如网站内部链接不一致,在很大程度上直接影响着网站在搜索引擎中的排名.例如彩票专营店导航栏中的“首页”链接,程序员在开发时可能会有以下几种 ...
- git-分支使用方式
需求场景:假如你看着教程完成了一个项目,但是感觉第一次代码掌握不牢,想要进行第二次代码练习--如果某某心里想我还有初始备份文件,我此时的心里独白是你的硬盘还够用吗o(╯□╰)o 1 创建一个新分支 - ...
- sqlserver游标使用和循环
/*** 游标的使用 讲了这个多游标的优点,现在我们就亲自来揭开游标的神秘的面纱. 使用游标的顺序: 声名游标.打开游标.读取数据.关闭游标.删除游标. 1.3.1声明游标 最简单游标声明:DECLA ...