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页面。如果没有这些选项，可以进行奇怪的横向滑动。

如何在SwipeView中使用iScroll4？

2 个答案: