Question

I have a jQuery Mobile application that I’m trying to run on a Galaxy Tab device via Phonegap. Everything works as expected, but I have a swipe used to transition between a set of pages and it is horrendously laggy.

I’m actually using knockoutJS and a custom binding like this:

<!-- ko foreach: factors -->
<div data-role="page" data-bind="attr: { id: id }, swipe: $data"> 
    <!-- some content here that I don't *think* is the problem -->
</div>
<!-- /ko -->

ko.bindingHandlers["swipe"] = {
    init: function (element, valueAccessor) {
        var qe = $(element);
        var val = ko.utils.unwrapObservable(valueAccessor());
        qe.bind("swipeleft", function () {
            var next = qe.next("div[data-role='page'][data-bind*='swipe']");
            if(next.length) {
                $.mobile.changePage(next, {
                    transition: "slide"
                });
            } else {
                qe.effect("shake");
            }
        });
        qe.bind("swiperight", function () {
            var prev = qe.prev("div[data-role='page']");
            if(prev.length) {
                $.mobile.changePage(prev, {
                    transition: "slide",
                    reverse: true
                });
            } else {
                qe.effect("shake");
            }
        });
    }

I tried removing pretty much all the content from the pages and that didn’t help. I tried replacing the slide transition with none and that helped a little, but the performance is still unacceptably slow.

Any tricks or tips to make this work reasonably well?

Answer 1

This gave me a partial solution at least:

Swipe with jQuery Mobile 1.2, PhoneGap 2.1 and Android 4.0.4 not working properly

It seems that binding vmousemouse and setting it to preventDefault makes the swipes work much better, but at the same time it disables scrolling!