如何在SwipeView中使用iScroll4？

Question

我正在使用iScroll4在移动网站上的图像上创建水平滚动效果。 iScroll非常棒，但问题是iScroll包装器中包含的图像会禁用本机垂直滚动。 换句话说，在iScroll包装图像内的任何位置禁用用户的手指滑动以导航页面。

SwipeView可能能够解决这个问题，但文档（至少对我来说）并不是那么清楚。 有谁知道如何在iScroll包装图像上有效使用SwipeView？

Answer 1

很抱歉几乎重现了已经做出的答案 - 但我需要将一些代码粘贴到不同的空间。

阿拉斯泰尔的例子并不适合我。 我下载的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手机游戏测试中也链接到这里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-scrolling被禁用，使该事件可用于SwipeView并且方向被锁定，因此当垂直（iScroll）滑动正在进行时，用户滑动方向的更改将不会滑动到下一个SwipeView页面。 如果没有这些选项，可以进行奇怪的水平滑动。