yanhaijing / zepto.fullpage

Focusing on the fullPage.js for mobile terminals.
MIT License
2.1k stars 509 forks source link

某页禁止下滑只能点击某个按钮跳到下一页。 #103

Closed web-oop closed 6 years ago

web-oop commented 6 years ago

问题是什么

我想在某一个页面禁止下滑,只能点击某个按钮进入下一页。

beforeChange:function(params){
    if(params.next>params.cur&&params.cur==7){
        return false;
    }
}

//这样写了之后再按钮调用如下JS也跳不到下一页了。请问有其它办法吗?
$.fn.fullpage.moveNext(true);
yanhaijing commented 6 years ago

同样的问题 #84 ,但84直接给的解决办法又问题,问题就是上面👆这个同学提出的问题,虽然能够禁止翻页,但是手动的方式也挂了。。。

beforeChange:function(params){
    if(params.next > params.cur && params.cur == 7){
        return false;
    }
}

//这样写了之后再按钮调用如下JS也跳不到下一页了
$.fn.fullpage.moveNext(true);

解决办法有两种,但都不是很完美,先说第一种

方法一:顺着上面的思路,其实缺少一个参数区分是事件触发的翻屏,还是程序触发的翻屏,这个我后续会考虑加一个参数,dom事件里就有一个参数用来代表是否是用户行为触发,比如event.isTrusted

虽然目前没有,但其实只要在引入一个标志位来控制就可以了

var flag =true;

// 回调
beforeChange:function(params){
    if(params.next > params.cur && params.cur == 7 && flag){
        return false;
    }
}

// 按钮事件中,先把标志位反转,再手动下一页就可以了
flag = false;
$.fn.fullpage.moveNext(true);
flag = true; // 此处需要把标志位再次反转,自己思考是为什么

方法二:如果换一种思路,在第七页时,禁止掉翻页的动作就行了,但此时也无法向上翻页

beforeChange:function(params){
    if(params.next > params.cur && params.cur == 7){
        $.fn.fullpage.stop()
    } else {
        $.fn.fullpage.start()
    }
}

// 事件回调手动翻页
$.fn.fullpage.moveNext(true);

方法三:如果引入了isTrusted,那可以使用下面的方法,目前还未引入,计划下一个版本,也希望你能提个pr

beforeChange:function(params){
    if(params.next > params.cur && params.cur == 7 && params.isTrusted){
        return false;
    }
}

// 事件回调手动翻页
$.fn.fullpage.moveNext(true);

最后感谢反馈,欢迎使用,我计划在未来添加 isTrusted属性,已添加到 TODO列表

web-oop commented 6 years ago

多谢,多谢! 我暂时先用第二种方法 应急。 你说的提一个pr我还不太懂。。我后面有空看看。

yanhaijing commented 6 years ago

@web-oop 感谢反馈和使用,如果能提供外网url就更好了,O(∩_∩)O哈哈~