原生方法實現移動端的手動觸摸滾動

標籤：

  var isScrolling, startPos, endPos;        var slider = {            //判斷裝置是否支援touch事件            touch: (‘ontouchstart‘ in window) || window.DocumentTouch && document instanceof DocumentTouch,            slider: document.getElementById(‘sliderBox‘),            //事件            events: {                index: 0,     //顯示元素的索引                slider: this.slider,     //this為slider對象                icons: document.getElementById(‘sliderBox‘),                icon: document.getElementById(‘sliderBox‘).getElementsByClassName(‘swiper-slide‘),                handleEvent: function (event) {                    var self = this;     //this指events對象                    if (event.type == ‘touchstart‘) {                        self.start(event);                    } else if (event.type == ‘touchmove‘) {                        self.move(event);                    } else if (event.type == ‘touchend‘) {                        self.end(event);                    }                },                //滑動開始                start: function (event) {                    var touch = event.targetTouches[0];     //touches數組對象獲得螢幕上所有的touch，取第一個touch                    startPos = {x: touch.pageX, y: touch.pageY, time: +new Date};    //取第一個touch的座標值                    isScrolling = 0;   //這個參數判斷是垂直滾動還是水平滾動                    if (isScrolling == 0) {                        this.icons.appendChild(this.icon[0]);                    }                    this.icons.addEventListener(‘touchmove‘, this, false);                    this.icons.addEventListener(‘touchend‘, this, false);                },                //移動                move: function (event) {                    //當螢幕有多個touch或者頁面被縮放過，就不執行move操作                    if (event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;                    var touch = event.targetTouches[0];                    endPos = {x: touch.pageX - startPos.x, y: touch.pageY - startPos.y};                    isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1 : 0;    //isScrolling為1時，表示縱向滑動，0為橫向滑動                    if (isScrolling == 0) {                        event.preventDefault();      //阻止觸摸事件的預設行為，即阻止滾屏                    }                },                //滑動釋放                end: function (event) {                    var duration = +new Date - startPos.time;    //滑動的期間                    if (isScrolling === 0) {    //當為水平滾動時                        //this.icon[this.index].className = ‘prize-box swiper-slide‘;                        if (Number(duration) > 10) {                            //判斷是左移還是右移，當位移量大於10時執行                            if (endPos.x > 10) {                                if (this.index !== 0) this.index -= 1;                            } else if (endPos.x < -10) {                                if (this.index !== this.icon.length - 1) this.index += 1;                            }                        }                        console.log(this.index);                        this.icon[0].className = ‘prize-box swiper-slide first‘;                        this.icon[1].className = ‘prize-box swiper-slide active‘;                        this.icon[2].className = ‘prize-box swiper-slide last‘;                        //this.icons.style.left = -this.index*600 + ‘px‘;                    }                    //解除綁定事件                    this.icons.removeEventListener(‘touchmove‘, this, false);                    this.icons.removeEventListener(‘touchend‘, this, false);                }            },            //初始化            init: function () {                var self = this;     //this指slider對象                if (!!self.touch) self.slider.addEventListener(‘touchstart‘, self.events, false);    //addEventListener第二個參數可以傳一個對象，會調用該對象的handleEvent屬性            }        };        slider.init();

　　

原生方法實現移動端的手動觸摸滾動