如何将 iScroll4 与 SwipeView 结合使用？

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
});

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

尚未进行扩展测试 - 这只是我的东西我在看一点虽然比较了要使用的库的组合，但它使用上面的代码在 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 页面。如果没有这些选项，人们可能会进行奇怪的水平滑动。