移動端上下滑動事件之--坑爹的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/

 

第三個就是技術羣裏面的一些童鞋提供，親測是有效的：

 

(function($) {
    var options, Events, Touch;
    options = {
        x: 20,
        y: 20
    };
    Events = ['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'tap', 'longTap', 'drag'];
    Events.forEach(function(eventName) {
        $.fn[eventName] = function() {
            var touch = new Touch($(this), eventName);
            touch.start();
            if (arguments[1]) {
                options = arguments[1]
            }
            return this.on(eventName, arguments[0])
        }
    });
    Touch = function() {
        var status, ts, tm, te;
        this.target = arguments[0];
        this.e = arguments[1]
    };
    Touch.prototype.framework = function(e) {
        e.preventDefault();
        var events;
        if (e.changedTouches) events = e.changedTouches[0];
        else events = e.originalEvent.touches[0];
        return events
    };
    Touch.prototype.start = function() {
        var self = this;
        self.target.on("touchstart",
        function(event) {
            event.preventDefault();
            var temp = self.framework(event);
            var d = new Date();
            self.ts = {
                x: temp.pageX,
                y: temp.pageY,
                d: d.getTime()
            }
        });
        self.target.on("touchmove",
        function(event) {
            event.preventDefault();
            var temp = self.framework(event);
            var d = new Date();
            self.tm = {
                x: temp.pageX,
                y: temp.pageY
            };
            if (self.e == "drag") {
                self.target.trigger(self.e, self.tm);
                return
            }
        });
        self.target.on("touchend",
        function(event) {
            event.preventDefault();
            var d = new Date();
            if (!self.tm) {
                self.tm = self.ts
            }
            self.te = {
                x: self.tm.x - self.ts.x,
                y: self.tm.y - self.ts.y,
                d: (d - self.ts.d)
            };
            self.tm = undefined;
            self.factory()
        })
    };
    Touch.prototype.factory = function() {
        var x = Math.abs(this.te.x);
        var y = Math.abs(this.te.y);
        var t = this.te.d;
        var s = this.status;
        if (x < 5 && y < 5) {
            if (t < 300) {
                s = "tap"
            } else {
                s = "longTap"
            }
        } else if (x < options.x && y > options.y) {
            if (t < 250) {
                if (this.te.y > 0) {
                    s = "swipeDown"
                } else {
                    s = "swipeUp"
                }
            } else {
                s = "swipe"
            }
        } else if (y < options.y && x > options.x) {
            if (t < 250) {
                if (this.te.x > 0) {
                    s = "swipeLeft"
                } else {
                    s = "swipeRight"
                }
            } else {
                s = "swipe"
            }
        }
        if (s == this.e) {
            this.target.trigger(this.e);
            return
        }
    }
})(window.jQuery || window.Zepto);

總結：爲何要把這個做爲一篇博客發出去，就是由於以前碰到這個問題的時候，問度娘問谷歌都不多答案。因此把這個小問題說出來，讓碰到相似問題的童鞋，可以有一些啓發。

 

 

 

 

Author: Alone
Antroduction: 高級前端開發工程師
Sign: 人生沒有失敗，只有沒到的成功。