移动端左右、上下滑动:
当页面中既需要页面滑动操作,又需要上下或左右滑动页面上的某个元素时,直接使用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下元素滑动问题的更多相关文章

  1. 有关ViewPager的使用及解决Android下ViewPager和PagerAdapter中调用notifyDataSetChanged失效的问题

    ViewPager是android-support-v4.jar包中的一个系统控件,继承自ViewGroup,专门用以实现左右滑动切换View的效果,使用时需要首先在Project->prope ...

  2. Android 解决Gallery下ScrollView滑动事件冲突

    在Gallery下,里面内容过长超出屏幕,这时我们可以用ScrollView来滚动,但是这样做了以后,会发现一个问题,Gallery的滑动事件和ScrollView的滑动事件起冲突,这时我们可以自定义 ...

  3. ios下元素溢出设置 overflow:auto; 不能滑动解决办法

    ios下元素溢出设置 overflow:auto; 不能滑动解决办法: overflow:auto; overflow-y:scroll; -webkit-overflow-scrolling:tou ...

  4. 移动web在ios和android下点击元素出现阴影问题

     移动web开发经验总结 1.-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影.备注:transp ...

  5. 如何解决ADT17下Android第三方jar包NoClassDefFoundError的错误

    转自:http://blog.csdn.net/huzgd/article/details/7604069本人已试过第二种解决方法可行!! 原文:Posted by Foxykeep on 22/03 ...

  6. 解决IE8下opacity属性失效问题,无法隐藏元素

    解决IE8下opacity属性失效问题   由于opacity属性存在兼容性问题,所以在IE8下,用opacity来设置元素的透明度,会失效,从而导致页面的样式问题.在IE8及其更早的浏览器下,我们可 ...

  7. Android NestedScrolling嵌套滑动机制

    Android NestedScrolling嵌套滑动机制 最近项目要用到官网的下拉刷新SwipeRefreshLayout,它是个容器,包裹各种控件实现下拉,不像以前自己要实现事件的拦截,都是通过对 ...

  8. Android View的滑动

    Android View的滑动 文章目录 Android View的滑动 一.实现移动 1.1 layout() 1.2 设置位置偏移量 1.3 改变布局参数 1.4 动画 1.5 ScrollTo以 ...

  9. CSharp程序员学Android开发---3.Android内部元素不填充BUG

    最近公司组织项目组成员开发一个Android项目的Demo,之前没有人有Andoid方面的开发经验,都是开发C#的. 虽说项目要求并不是很高,但是对于没有这方面经验的人来说,第一步是最困难的. 项目历 ...

随机推荐

  1. 基于React Native的移动平台研发实践分享

    转载:http://blog.csdn.net/haozhenming/article/details/72772787 本文目录: 一.React Native 已经成为了移动前端技术的趋势 二.基 ...

  2. Qt学习之路MainWindow学习过程中的知识点

    一.Qt的GUI程序有一个常用的顶层窗口,叫做MainWindow MainWindow继承自QMainWindow.QMainWindow窗口分成几个主要的区域:   二.QAction类 QAct ...

  3. 《effective Go》读后记录

    一个在线的Go编译器 如果还没来得及安装Go环境,想体验一下Go语言,可以在Go在线编译器 上运行Go程序. 格式化 让所有人都遵循一样的编码风格是一种理想,现在Go语言通过gofmt程序,让机器来处 ...

  4. Longge's problem poj2480 欧拉函数,gcd

    Longge's problem Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6918   Accepted: 2234 ...

  5. End up with More Teams UVA - 11088

    End up with More Teams Time Limit: 3000MS   Memory Limit: Unknown   64bit IO Format: %lld & %llu ...

  6. jQuery ajax的提交

    1.利用jQuery中的aja提交数据,首先引入jQuery中的文件 2.jquery.form.js下载地址:http://vdisk.weibo.com/s/thY_x31gX0M-p?categ ...

  7. VB.net DateTimePicker 初始化为空,选择后显示日期

    目的:当某记录的日期数据为空的时候,DateTimePicker 不以默认当前时间显示. 优点:避免不规则的时间格式输入:符合平时遇到的时间输入习惯 缺点:设置要代码,没有textbox控件那么方便设 ...

  8. 程序员网站开发时应该注意的SEO问题

    一.链接的统一性 搜索引擎排名最主要的因素就是网站内容和链接,假如网站内部链接不一致,在很大程度上直接影响着网站在搜索引擎中的排名.例如彩票专营店导航栏中的“首页”链接,程序员在开发时可能会有以下几种 ...

  9. git-分支使用方式

    需求场景:假如你看着教程完成了一个项目,但是感觉第一次代码掌握不牢,想要进行第二次代码练习--如果某某心里想我还有初始备份文件,我此时的心里独白是你的硬盘还够用吗o(╯□╰)o 1 创建一个新分支 - ...

  10. sqlserver游标使用和循环

    /*** 游标的使用 讲了这个多游标的优点,现在我们就亲自来揭开游标的神秘的面纱. 使用游标的顺序: 声名游标.打开游标.读取数据.关闭游标.删除游标. 1.3.1声明游标 最简单游标声明:DECLA ...