Question

我为我的Phonegap移动应用设计了一个使用jquery mobile和css的自定义按钮。单击按钮时，只需切换开/关状态，即可更改css类。但是，iPhone / iPad / Android设备上的切换/更改速度太慢。渲染切换的CSS的按钮有一些延迟。它实际上在桌面浏览器上非常快。

我在代码中所做的只是：

$("input[id='someid']").closest('div').removeClass("buttonUp ").addClass("buttonDown");
$("input[id='someid']").closest('div').removeClass("buttonDown").addClass("buttonUp");

CSS：

            .buttonDown {
                border:1px solid #000;font-weight:bold; cursor:pointer; text-shadow:0 1px 1px #000; text-decoration:none; background:#8FFFDD;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#8FFFDD), color-stop(100%,#72ccb1));background-image:-moz-linear-gradient(top, #72ccb1 0%, #8FFFDD 100%);background-image:-webkit-linear-gradient(top, #8FFFDD 0%,#72ccb1 100%);background-image:-o-linear-gradient(top, #8FFFDD 0%,#72ccb1 100%);background-image:-ms-linear-gradient(top, #8FFFDD 0%,#72ccb1 100%);background-image:linear-gradient(to bottom, #8FFFDD 0%,#72ccb1 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#8FFFDD', endColorstr='#72ccb1',GradientType=0 );color:#3D6AFF;
            }   


            .buttonUp {
                border:1px solid #000;font-weight:bold; cursor:pointer; text-shadow:0 1px 1px #000; text-decoration:none;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#DD3B1B), color-stop(100%,#b12f16));background-image:-moz-linear-gradient(top, #b12f16 0%, #DD3B1B 100%);background-image:-webkit-linear-gradient(top, #DD3B1B 0%,#b12f16 100%);background-image:-o-linear-gradient(top, #DD3B1B 0%,#b12f16 100%);background-image:-ms-linear-gradient(top, #DD3B1B 0%,#b12f16 100%);background-image:linear-gradient(to bottom, #DD3B1B 0%,#b12f16 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#DD3B1B', endColorstr='#b12f16',GradientType=0 );color:#000000;
            }

我试过'toggleClass（）'但是徒劳无功，对性能没有影响。

如何进一步优化？

感谢您的帮助。

Answer 1

这种延迟是故意放在那里的。它应该是大约300毫秒。

无论人们认为混合应用程序比原生应用程序有许多缺点。在这种情况下，问题是点击事件检测与刷卡事件。如果两个操作都是即时应用程序无法识别什么是单击事件以及什么是滑动操作的开始事件。由于此滑动操作需要具有优势，并且点击事件仅在其持续至少300毫秒时才起作用。

如果您使用 vclick 或touchstart事件替换点击事件，则可以修复此问题。此事件不会受到延迟问题的影响。

如果您想了解更多相关内容，请查看我关于click / vclick / tap事件之间差异的其他答案。可在此处找到： In jQuery mobile, what's the diff between tap and vclick?

另一方面，如果您想保留所有内容，您还可以使用名为 Fastclick 的第三方jQuery Mobile插件解决此问题。它的作用是创建快速响应按钮，没有鬼点击和恼人的 300ms 延迟。尝试一下，你可能会喜欢。

在Phonegap应用的iOS / Android设备中，按钮css的变化非常慢

1 个答案: