如何在SwipeView中使用iScroll4？

Question

我正在使用iScroll4在一个移动网站的图片上创建一个水平滚动效果。iScroll工作得很棒，但问题是iScroll包装器中包含的图像禁用了本机垂直滚动。换句话说，在iScroll包装图像中的任何位置都禁用用户的手指滑动来导航页面。

SwipeView也许能够解决这个问题，但是文档(至少对我来说)不是很清楚。有人知道如何在iScroll包装的图像上有效地使用SwipeView吗？

Answer 1

很抱歉重复已经做过的回答--但我需要将一些代码粘贴到不同的空间中。

Alastair的例子对我来说并不是很有效。我下载的iScroll版本似乎不支持匹配类，它需要一个对象。因此，由于我的项目已经有了jQuery，所以我使用它来传递活动元素。

scroller = new iScroll($('.swipeview-active')[0], {
  hScroll: false,
  lockDirection: true,
  hideScrollbar: true,
  fadeScrollbar: true
});

我将这段代码添加到http://cubiq.org/swipeview下载中demo/inline/test.html中的示例的carousel.onFlip()函数的末尾

我还没有做过扩展测试--这只是我在比较要使用的库的组合时所看到的一些东西，但是使用上面的代码，它在Chrome中的工作就像你所期望的那样。

编辑刚刚在iphone上的移动safari中测试过的链接这里https://dl.dropbox.com/u/81328343/scroll/test.html

唯一一件事(不确定它是好是坏，取决于用例)是，当返回到幻灯片时，它会跳回到顶部。

Answer 2

我发现文档也非常缺乏，但像这样的东西对我来说是有效的：

function swipeView(wrapper){
        wrapper = new SwipeView('#wrapper', {
        numberOfPages: pages.length
    });

    wrapper.onFlip(function(){
        scroller = new iScroll('.swipeview-active', {
            hScroll: false,
            lockDirection: true
        });
    });
}

这会在滑动到当前SwipeView页面时初始化它的iScroll。水平iScroll-滚动被禁用，这使得SwipeView可以使用该事件，并且方向被锁定，因此当垂直(iScroll)滑动正在进行时，用户滑动方向的更改不会滑动到下一个SwipeView页面。如果没有这些选项，就可以进行奇怪的水平滑动。