问题描述

zepto.fullpage.js想禁用手指上下滑屏的事件，只保留点击全屏滑动的事件的话该怎么做呢?

有了解zepto.fullpage.js的么？我如果想禁用手指上下滑屏的事件，只保留点击全屏滑动的事件的话该怎么做呢?

         *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        #banner {
            height: 100%;
            overflow: hidden;
        }
        .section{
            height: 100%;
        }
        .section1{
            background: aquamarine;
        }
        .section2{
            background: #990000;
        }
        .section3{
            background: chartreuse;
        }
        .section4{
            background: cadetblue;
        }
        .section5{
            background: darkolivegreen;
        }
        .btn{
            position: absolute;
            top: 500px;
            left: 100px;
        }

     <div id="banner">
        <div class="section section1"></div>
        <div class="section section2"></div>
        <div class="section section3"></div>
        <div class="section section4"></div>
        <div class="section section5"></div>
        <input class="btn" type="button" value="下一页"/>
    </div>

 (function($, window, undefined) {
    if (typeof $ === 'undefined') {
        throw new Error('zepto.fullpage's script requires Zepto');
    }
    $(document).on('touchmove', function(e) {
        e.preventDefault();
    });
    var fullpage = null;
    var d = {
        page: '.page',
        start: 0,
        duration: 500,
        loop: false,
        drag: false,
        dir: 'v',
        change: function(data) {},
        beforeChange: function(data) {},
        afterChange: function(data) {},
        orientationchange: function(orientation) {}
    };

    function fix(cur, pagesLength, loop) {
        if (cur < 0) {
            return !!loop ? pagesLength - 1 : 0;
        }

        if (cur >= pagesLength) {
            return !!loop ? 0 : pagesLength - 1;
        }

        return cur;
    }

    function move($ele, dir, dist) {
        var translate = dir === 'v' ? 'translateY' : 'translateX';
        $ele.css('-webkit-transform', translate + '(' + dist + 'px)')
        .css('transform', translate + '(' + dist + 'px)');
    }

    function init(option) {
        var o = $.extend(true, {}, d, option);
        var that = this;
        that.curIndex = -1;
        that.o = o;

        that.startY = 0;
        that.movingFlag = false;

        that.$this.addClass('fullPage-wp');
        that.$parent = that.$this.parent();
        that.$pages = that.$this.find(o.page).addClass('fullPage-page fullPage-dir-' + o.dir);
        that.pagesLength = that.$pages.length;
        that.update();
        that.initEvent();
        that.status = 1;
    }

    function Fullpage($this, option) {
        this.$this = $this;
        init.call(this, option);
    }

    $.extend(Fullpage.prototype, {
        update: function() {
            if (this.o.dir === 'h') {
                this.width = this.$parent.width();
                this.$pages.width(this.width);
                this.$this.width(this.width * this.pagesLength);
            }

            this.height = this.$parent.height();
            this.$pages.height(this.height);

            this.moveTo(this.curIndex < 0 ? this.o.start : this.curIndex);
        },
        initEvent: function() {
            var that = this;
            var $this = that.$this;

            $this.on('touchstart', function(e) {
                if (!that.status) {return 1;}
                e.preventDefault();
                if (that.movingFlag) {
                    return 0;
                }

                that.startX = e.targetTouches[0].pageX;
                that.startY = e.targetTouches[0].pageY;
            });
            $this.on('touchend', function(e) {
                if (!that.status) {return 1;}
                e.preventDefault();
                if (that.movingFlag) {
                    return 0;
                }

                var sub = that.o.dir === 'v' ? e.changedTouches[0].pageY - that.startY : e.changedTouches[0].pageX - that.startX;
                var der = (sub > 30 || sub < -30) ? sub > 0 ? -1 : 1 : 0;

                that.moveTo(that.curIndex + der, true);
            });
            if (that.o.drag) {
                $this.on('touchmove', function(e) {
                    if (!that.status) {return 1;}
                    e.preventDefault();
                    if (that.movingFlag) {
                        return 0;
                    }

                    var y = e.changedTouches[0].pageY - that.startY;
                    var x = e.changedTouches[0].pageX - that.startX;
                    var dist = -that.curIndex * (that.o.dir === 'v' ? (that.height + y) : (that.width + x));
                    $this.removeClass('anim');
                    move($this, that.o.dir, dist);
                });
            }

            // 翻转屏幕提示
            // ==============================
            window.addEventListener("orientationchange", function() {
                if (window.orientation === 180 || window.orientation === 0) {
                    that.o.orientationchange('portrait');
                }
                if (window.orientation === 90 || window.orientation === -90) {
                    that.o.orientationchange('landscape');
                }
            }, false);

            window.addEventListener("resize", function() {
                that.update();
            }, false);
        },

        start: function() {
            this.status = 1;
        },
        stop: function() {
            this.status = 0;
        },
        moveTo: function(next, anim) {
            var that = this;
            var $this = that.$this;
            var cur = that.curIndex;
            next = fix(next, that.pagesLength, that.o.loop);

            if (anim) {
                $this.addClass('anim');
            } else {
                $this.removeClass('anim');
            }

            if (next !== cur) {
                that.o.beforeChange({
                    next: next,
                    cur: cur
                });
            }

            that.movingFlag = true;
            that.curIndex = next;
            move($this, that.o.dir, -next * (that.o.dir === 'v' ? that.height : that.width));

            if (next !== cur) {
                that.o.change({
                    next: next,
                    cur: cur
                });
            }

            window.setTimeout(function() {
                that.movingFlag = false;
                if (next !== cur) {
                    that.o.afterChange({
                        next: next,
                        cur: cur
                    });
                    that.$pages.removeClass('cur').eq(next).addClass('cur');
                }
            }, that.o.duration);
        },
        movePrev: function(anim) {
            this.moveTo(this.curIndex - 1, anim);
        },
        moveNext: function(anim) {
            this.moveTo(this.curIndex + 1, anim);
        }
    });

    $.fn.fullpage = function(option) {
        if (!fullpage) {
            fullpage = new Fullpage($(this), option);
        }
        return this;
    };
    //暴漏方法
    $.each(['update', 'moveTo', 'moveNext', 'movePrev', 'start', 'stop'], function(key, val) {
        $.fn.fullpage[val] = function() {
            if (!fullpage) {
                return 0;
            }
            fullpage[val].apply(fullpage, [].slice.call(arguments, 0));
        };
    });
}(Zepto, window));

解决方案

全屏滑动？？你滑动不是由手指上线滑动组成的，你怎么知道是否全屏。。

解决方案二：

https://github.com/yanhaijing/zepto.fullpage/issues/12 亲记得去官网提问哈