Question

我需要一个导航菜单，根据点击和滑动反映页面更改。要执行此操作，我必须在滑动时触发单击。问题是，当我这样做时，我再也无法使用：

$.mobile.changePage(prevpage, { transition : 'realslide', reverse : true });

财产reverse:true是重要的一部分。 'swipeleft'可以有一个常规的过渡，但'swiperight'需要反向过渡，我不能在data-transition="reverse"的HTML中执行此操作，因为它取决于滑动方向。

目前这是我的代码的样子（由用户Jasper提供）。我不确定在哪里可以配合反向过渡。

$(function(){
    var $nav   = $('#nav').children().children(),
        totNav = $nav.length;

    $(document).on('swipeleft', '.ui-page', function() {

        var next = ($nav.filter('.active').index() + 1);

        if (next === totNav)
            return;

        $nav.eq(next).children().trigger('click');

    }).on('swiperight', '.ui-page', function() {

        var prev = ($nav.filter('.active').index() - 1);

        if (prev === -1)
            return;

        $nav.eq(prev).children().trigger('click');

    }).on('click', '#nav a', function(e) {
        $(this).parent().addClass("active").siblings().removeClass("active");
    });
});

这个问题是对此的扩展：Update menu in jQuery Mobile based on swipe event

修改谢谢大家的帮助！这是我的最终解决方案：

    <script>
    $(function(){

        var $nav    = $('#nav').children().children(),
            totNav  = $nav.length;

        $(document).on('swipeleft', '.ui-page', function() {

            var next = ($nav.filter('.active').index() + 1);
            var $elem = $nav.eq(next).children();

            if (next === totNav)
                return;

            $.mobile.changePage.defaults.reverse = false;

            $elem.trigger('click');

        }).on('swiperight', '.ui-page', function() {

            var prev = ($nav.filter('.active').index() - 1);
            var $elem = $nav.eq(prev).children();

            if (prev === -1)
                return;

            $.mobile.changePage.defaults.reverse = true;

            $elem.trigger('click');

        }).on('click', '#nav a', function(e) {

            var prev = $nav.filter('.active').index();

            $(this).parent().addClass("active").siblings().removeClass("active");

            var now = $nav.filter('.active').index();

            if (prev > now)
                $.mobile.changePage.defaults.reverse = true;
            else
                $.mobile.changePage.defaults.reverse = false;

        });

    });
    </script>

Answer 1

好吧，这个解决方案可能有点hackish，但它确实有效。

在触发事件之前，您可以将默认页面转换设置为反转，然后在触发器之后将其设置为默认值。我没有尝试过，但我认为它可能是这样实现的：

$(function(){
    var $nav   = $('#nav').children().children(),
        totNav = $nav.length;

    $(document).on('swipeleft', '.ui-page', function() {

        var next = ($nav.filter('.active').index() + 1);
    $.mobile.changePage.defaults.reverse = true; // Reverse transition
        $nav.eq(next).children().trigger('click');
    $.mobile.changePage.defaults.reverse = false; // Dont reverse


    }).on('swiperight', '.ui-page', function() {

        var prev = ($nav.filter('.active').index() - 1);
        $nav.eq(prev).children().trigger('click');

    }).on('click', '#nav a', function(e) {
        $(this).parent().addClass("active").siblings().removeClass("active");
    });
});

使用触发器时更改jQuery Mobile转换（'click'）

1 个答案: