【问题标题】:Hammer.js swipe not working with Cordova InAppBrowserHammer.js 滑动不适用于 Cordova InAppBrowser
【发布时间】:2018-07-05 12:36:02
【问题描述】:

我有一个使用 Hammer.js 进行滑动功能的托管网站。滑动功能在桌面和移动浏览器中都能正常工作,但在 Cordova InAppBrowser (cordova-plugin-inappbrowser) 上不起作用。

Cordova 应用程序:

var ref = cordova.InAppBrowser.open('http://10.200.200.210:80/#dashboard', '_blank', 'location=no,clearcache=yes,clearsessioncache=yes,hidenavigationbuttons=yes,hideurlbar=yes');

Web 应用程序 (Knockout.js/html)

        var events = ['tap', 'doubletap', 'hold', 'rotate',
     'drag', 'dragstart', 'dragend', 'dragleft', 'dragright', 'dragup',
     'dragdown', 'transform', 'transformstart',
     'transformend', 'swipe', 'swipeleft', 'swiperight',
     'swipeup', 'swipedown', 'pinch', 'pinchin', 'pinchout'];

        ko.utils.arrayForEach(events, function (eventName) {
            ko.bindingHandlers[eventName] = {
                update: function (element, valueAccessor) {
                   // var BindingContext = valueAccessor()[0];
                    var EventToFire = valueAccessor()[0];

                    var options = {
                        dragLockToAxis: true,
                        dragBlockHorizontal: true
                    };

                    var hammerTime = new Hammer(element, options);
                    hammerTime.on(eventName, function (ev) {
                        //Fire the event with the item it was bound to.
                        EventToFire();
                    });
                }
            };
        });
<table width="100%" border="0" cellspacing="0" cellpadding="0" data-bind="swipeleft: [SwipeLeft], swiperight: [SwipeRight]">
        <tr>
            <td>
                 <input type="text" data-bind="value: customer.name, valueUpdate: 'afterkeydown'">
            </td>
            <td>
                 <input type="text" data-bind="value: customer.code, valueUpdate: 'afterkeydown'">
            </td>
            <td>
                 <input type="text" data-bind="value: customer.description, valueUpdate: 'afterkeydown'" style="width: 295px">
            </td>
        </tr>
</table>

【问题讨论】:

    标签: cordova inappbrowser hammer.js


    【解决方案1】:

    Hammer.js?这让我想起了糟糕的旧回忆。

    切换到 jQuery 的event.swipe library 后,我所有的滑动问题都已解决。随意尝试,我在所有环境(Cordova、iOS、Android、Windows Phone 等)上都使用它并取得了巨大成功。

    我还创建了一个支持新 PointerEvents 的修改版本,它可能会更好,也可能不会更好,请查看here。这个仅用于水平滚动。

    【讨论】:

      【解决方案2】:

      问题是由于缓存造成的。一旦我在我的设备上卸载并重新安装 android 应用程序,它就已修复。谢谢。

      【讨论】:

        猜你喜欢
        • 2016-10-22
        • 1970-01-01
        • 2020-11-14
        • 1970-01-01
        • 2019-05-16
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-07-20
        相关资源
        最近更新 更多