Question

我一直在花费大部分时间进行故障排除，并根据Parallax在此自定义单页网站脚本（http://www.netcu.de/jquery-touchwipe-iphone-ipad-library）上搜索有关TouchWipe（http://www.joerg-niemann.de/blog/up-down-left-right-scrolling-single-page-website/）集成的问题的答案，这正是我为我的最新项目所寻找的。

脚本本身可以完成我想要的一切，漂亮的过渡和键盘控制直接开箱即用，但我不能为我的生活，如何整合TouchWipe。

这个想法是，访问iOS用户应该能够轻松地用手指在页面之间轻扫/滑动/滑动，例如单击导航箭头或当前使用键盘。

我的问题是尝试调用与TouchWipe手势相同的功能，如点击箭头或使用键盘。脚本的on-click函数调用部分如下所示：

        function setRight(page, text) {
            $("#rightText").text(text);
            $("#rightControl").show().unbind('click').click(function () {
                parallax[page].right();
            });
            rightKey = function () {
                parallax[page].right();
            };
        }

我绝不是一个JavaScript开发人员，因为我无法在任何地方找到一个合适的答案（对于使用自定义脚本没有常见问题解答我感到羞耻）如何将触摸与这个可爱的脚本集成，我正在联系你。

我尝试了在擦除/滑动/触摸上调用必要功能的众多不同变体，但都无法正常工作。我不能为我的生活弄清楚为什么这不起作用：

<script>
    $(document).ready(function(){
        $('body').touchwipe({
            wipeLeft: function(){ parallax[page].left(); },
            wipeRight: function(){ parallax[page].right(); },
            wipeUp: function(){ parallax[page].top(); },
            wipeDown: function(){ parallax[page].bottom(); }
        })
    })
</script>

我希望我已经说清楚了，否则我可以随意抨击我，如果有要求，我会提供进一步的信息。我确信有一个简单的解释，说明为什么它没有像我希望的那样运作，但我似乎无法弄明白。

Answer 1

我终于想出了如何使用Parallax.js实现TouchWipe脚本。

以下是任何遇到此问题的人的答案：

<script>
    $(document).ready(function(){
        $('#index').touchwipe({
            wipeLeft: function(){ $(".control").hide(); parallax.right.right(); },
            wipeRight: function(){ $(".control").hide(); parallax.left.left(); },
            wipeUp: function(){  $(".control").hide(); parallax.top.top();  },
            preventDefaultEvents: true
        });

        $('#right').touchwipe({
            wipeRight: function(){ $(".control").hide(); parallax.index.left(); },
            preventDefaultEvents: true
        })


        $('#left').touchwipe({
            wipeLeft: function(){ $(".control").hide(); parallax.index.right(); },
            preventDefaultEvents: true
        })

        $('#top').touchwipe({
            wipeDown: function(){ $(".control").hide(); parallax.index.bottom(); },
            preventDefaultEvents: true
        })

    });        
</script>

原来我必须分别调用每个函数，为什么，我不知道，但由于某种原因它不会接受在组合函数中调用这两个函数。

首先，调用隐藏控件的函数，如下所示（用分号分隔，这样就可以添加另一个函数）：

$(".control").hide();

然后你必须像这样调用转换和页面更改（最后一个ID（parallax.xxxx.ID用于调用你希望新页面从哪一侧滑入） - 因为我使用TouchWipe进行设置该网站作为一个webapp，我当然会从相反的网站滑入页面：wipeUp触发parallax.top，wipeLeft触发parallax.right等。）：

parallax.index.bottom();

这是新的，改进的和kickass jsfiddle： http://jsfiddle.net/Q96uH/2/

我的伙伴们的代码！

Touchwipe集成 - 一页网站脚本

1 个答案: