如何将 iScroll4 与 SwipeView 一起使用？

Posted 2023-03-14

【中文标题】如何将 iScroll4 与 SwipeView 一起使用？

【英文标题】：How to use iScroll4 with SwipeView?

【发布时间】：2012-02-22 17:54:05

【问题描述】：

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

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

【问题讨论】：

你能提供一些代码吗？我在垂直 iScroll 中使用了水平 iScroll，并且两个方向都有效，所以不确定您的问题。

如何自动刷屏-一段时间后自动刷屏？

【参考方案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

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

【参考方案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 页面。如果没有这些选项，您可以进行奇怪的水平滑动。