3

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

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

4

2 回答 2

3

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

Alastair 的例子对我来说不太适用。我下载的 iScroll 版本似乎不支持匹配一个类，它想要一个对象。所以因为我的项目已经有了 jQuery，所以我用它来传递活动元素。

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

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

尚未进行扩展测试 - 这只是我在比较要使用的库组合时正在查看的内容，但它使用上面的代码在 Chrome 中按预期工作。

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

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

于 2012-08-31T14:06:56.540 回答
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 页面。如果没有这些选项，人们可以进行奇怪的水平滑动。

于 2012-07-06T14:16:01.433 回答