Hammer.js 滑动不适用于 Cordova InAppBrowser
Hammer.js swipe not working with Cordova InAppBrowser
我有一个使用 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 应用程序(淘汰赛。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>
Hammer.js?这带回了 糟糕的 旧回忆。
我所有的滑动问题都已解决,切换到 jQuery 的 event.swipe library。随意尝试,我在所有环境(Cordova、iOS、Android、Windows Phone 等)上都使用它并取得了巨大的成功。
我还创建了一个修改版本,它也支持新的 PointerEvents,它可能会更好,也可能不会更好,请查看 here。这个仅用于水平滚动。
问题是由缓存引起的。一旦我在我的设备上卸载并重新安装 android 应用程序,它就被修复了。谢谢。
我有一个使用 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 应用程序(淘汰赛。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>
Hammer.js?这带回了 糟糕的 旧回忆。
我所有的滑动问题都已解决,切换到 jQuery 的 event.swipe library。随意尝试,我在所有环境(Cordova、iOS、Android、Windows Phone 等)上都使用它并取得了巨大的成功。
我还创建了一个修改版本,它也支持新的 PointerEvents,它可能会更好,也可能不会更好,请查看 here。这个仅用于水平滚动。
问题是由缓存引起的。一旦我在我的设备上卸载并重新安装 android 应用程序,它就被修复了。谢谢。