移动端上下滑动事件之--坑爹的touch.js

下面的方法,不知道是操作方法不对还是啥.  在 zepto.js 里面加那一段代码不起作用

百度的 touch.js 是可以用的,但是使用方式 和 zepto有点不一样.

解决方案:参照这个链接地址

http://www.cnblogs.com/zhongxia/p/5410478.html

==========================================================

转:http://blog.csdn.net/minidrupal/article/details/39611605?utm_source=tuicool&utm_medium=referral

移动端页面的盛行，微信的便利的页面推广等等，让越来越多的css3效果和html5在手机端大放异彩。

于是乎，各式各样的简约酷炫的html5页面层出不穷，最多的就是视差滚动+css3动画。

接下来就说说自己在搞这些页面里面碰到的一个小问题-------zepto.js里面，坑爹的touch.js的上下滑动（swipe）事件失效。

在举例之前，先科普一下如何在pc端，查看html5页面在各种分辨率的手机的展示情况。

最常见的就是利用谷歌的手机模拟器。

步骤1：打开谷歌浏览器，按F12.

步骤2：然后按截图里面的步骤，选择各种分辨率，在刷新一下页面，就可以看到效果。

注：各种手机的选择

开始描述问题之前，先提供几个网址，

让你们试试能不能看到效果。

http://crbrsfadev.crc.com.cn:8080/zhaopin/index.htm?from=singlemessage&isappinstalled=0

 

http://zhaopin.jd.com/wechat/index.html?from=singlemessage&isappinstalled=0

 

http://zhaopin.jd.com/h5/index.html?from=singlemessage&isappinstalled=0

 

能在谷歌模拟器看到不同分辨率的效果。截几个图看一下。

 

 

 

 

好了，进入正题。

做这类html5页面，最主要的事件就是滑动事件。

分别是左右滑动和上下滑动。

说到这里，可能很多人都会脱口而出。用zepto.js就可以简单搞定啦。

 

我也是这么想的。于是很快的，就用zepto.js加上它的touch组件，touch.js实现了相应的效果。

在谷歌浏览器的模拟器也能很好的兼容。

 

后来放上测试服务器，用手机一看，问题来了！！！！

手机上的uc，腾讯，微信自带浏览器，QQ自带浏览器器，苹果系统的浏览器，安卓的原生浏览器，上下滑动的事件都失效！

只有谷歌浏览器是有事件相应的。坑爹啊！！！！

 

zepto.js用的人估计不少，想不到touch.js竟然兼容这么差，还是我打开的方式不对？！！！

这里就不贴这个js里面的代码出来了。

 

遇到问题，只好寻求其他解决方法。

解决方法先列几个吧。

第一个：jquery mobile里面的touch组件。

第二个：百度的童鞋们实现的touch.js.网址也贴一下吧：http://touch.code.baidu.com/

 

第三个就是技术群里面的一些童鞋提供，亲测是有效的：

 

[javascript] view plain copy

1. (function($) {
2. var options, Events, Touch;
3. options = {
4. x: 20,
5. y: 20
6. };
7. Events = ['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'tap', 'longTap', 'drag'];
8. Events.forEach(function(eventName) {
9. $.fn[eventName] = function() {
10. var touch = new Touch($(this), eventName);
11. touch.start();
12. if (arguments[1]) {
13. options = arguments[1]
14. }
15. return this.on(eventName, arguments[0])
16. }
17. });
18. Touch = function() {
19. var status, ts, tm, te;
20. this.target = arguments[0];
21. this.e = arguments[1]
22. };
23. Touch.prototype.framework = function(e) {
24. e.preventDefault();
25. var events;
26. if (e.changedTouches) events = e.changedTouches[0];
27. else events = e.originalEvent.touches[0];
28. return events
29. };
30. Touch.prototype.start = function() {
31. var self = this;
32. self.target.on("touchstart",
33. function(event) {
34. event.preventDefault();
35. var temp = self.framework(event);
36. var d = new Date();
37. self.ts = {
38. x: temp.pageX,
39. y: temp.pageY,
40. d: d.getTime()
41. }
42. });
43. self.target.on("touchmove",
44. function(event) {
45. event.preventDefault();
46. var temp = self.framework(event);
47. var d = new Date();
48. self.tm = {
49. x: temp.pageX,
50. y: temp.pageY
51. };
52. if (self.e == "drag") {
53. self.target.trigger(self.e, self.tm);
54. return
55. }
56. });
57. self.target.on("touchend",
58. function(event) {
59. event.preventDefault();
60. var d = new Date();
61. if (!self.tm) {
62. self.tm = self.ts
63. }
64. self.te = {
65. x: self.tm.x - self.ts.x,
66. y: self.tm.y - self.ts.y,
67. d: (d - self.ts.d)
68. };
69. self.tm = undefined;
70. self.factory()
71. })
72. };
73. Touch.prototype.factory = function() {
74. var x = Math.abs(this.te.x);
75. var y = Math.abs(this.te.y);
76. var t = this.te.d;
77. var s = this.status;
78. if (x < 5 && y < 5) {
79. if (t < 300) {
80. s = "tap"
81. } else {
82. s = "longTap"
83. }
84. } else if (x < options.x && y > options.y) {
85. if (t < 250) {
86. if (this.te.y > 0) {
87. s = "swipeDown"
88. } else {
89. s = "swipeUp"
90. }
91. } else {
92. s = "swipe"
93. }
94. } else if (y < options.y && x > options.x) {
95. if (t < 250) {
96. if (this.te.x > 0) {
97. s = "swipeLeft"
98. } else {
99. s = "swipeRight"
100. }
101. } else {
102. s = "swipe"
103. }
104. }
105. if (s == this.e) {
106. this.target.trigger(this.e);
107. return
108. }
109. }
110. })(window.jQuery || window.Zepto);

总结：为什么要把这个作为一篇博客发出去，就是因为之前碰到这个问题的时候，问度娘问谷歌都很少答案。所以把这个小问题说出来，让碰到类似问题的童鞋，能够有一些启发。

 

 

 

 

Author: Alone
Antroduction: 高级前端开发工程师
Sign: 人生没有失败，只有没到的成功。