菜鸟教程小白 发表于 2022-12-11 18:37:34

ios - 如何在 iOS 上使用 HammerJS 捏合手势而不滚动页面?


                                            <p><p>我正在使用 <a href="https://github.com/html-next/ember-gestures" rel="noreferrer noopener nofollow">Ember-Gestures</a>它在 Cordova 应用程序中实现 Hammer.js 以实现一些简单的手势控制。</p>

<p>我遇到了一个主要问题,即任何触发动画的手势(过渡、变换、SVG 动画),如果屏幕滚动任意量,则该动画将卡住并在滚动完成时处于其结束状态。特别是,我在一个可垂直滚动的页面上有一个元素,它应该(理想情况下)能够被捏入和张开以将其展开为多个元素或返回为一个元素。</p>

<p>我知道作为优化 iOS 在滚动期间卡住所有动画。但是,由于捏合和滑动手势都可以轻微滚动屏幕,这对于用户体验来说是很糟糕的,因为如果用户滑动(例如,稍微向上和向左而不是直接向左),精细的过渡可能会完全卡住。</p >

<p>我尝试了一些解决方案来启用滚动期间的渲染,例如 <a href="https://stackoverflow.com/questions/25125610/how-to-keep-animated-gifs-animated-while-scrolling-on-ios-devices" rel="noreferrer noopener nofollow">here</a> ,但这些似乎不适用于当代版本的 iOS。我还尝试过使用hammerJS e.preventDefault() 方法在通过Ember-gestures 扩展调用的手势期间卡住滚动,所以我的方法如下所示:</p>

<pre><code>swipeLeft(e) {
    e.originalEvent.gesture.srcEvent.preventDefault()
    // Do stuff
},
</code></pre>

<p>...但这没有任何明显的效果。 (也许这里有什么问题?<code>gesture</code> 本身没有 <code>preventDefault()</code> 方法,而 ember-gestures 似乎试图将其中的一些抽象出来。</p>

<p>有什么方法可以在滚动期间保持动画呈现(这似乎不太可能),或者在执行动画之前停止页面滚动(并在执行时阻止滚动)?</p>

<p>或者,我有什么方法可以为被解释为“捏”或“滑动”手势的内容添加约束,从而排除那些也被解释为滚动手势的内容。</p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>我的解决方案最终是添加事件处理程序,以便当用多个手指触摸屏幕时,将主体设置为固定位置,使其在触摸期间不可滚动(触摸时移除固定位置)结束)。我将处理程序添加到 <code>pinchStart</code> 和 <code>pinchEnd</code> 事件</p>

<p>我怀疑那里可能有更优雅的解决方案,但为了在捏合时禁用意外滚动以使 D3.js 动画不会在中途卡住,这是一个快速有效的解决方案。</p></p>
                                   
                                                <p style="font-size: 20px;">关于ios - 如何在 iOS 上使用 HammerJS 捏合手势而不滚动页面?,我们在Stack Overflow上找到一个类似的问题:
                                                        <a href="https://stackoverflow.com/questions/41735438/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/41735438/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: ios - 如何在 iOS 上使用 HammerJS 捏合手势而不滚动页面?