我使用 jquery mobile 和 css 为我的 Phonegap 移动应用程序设计了一个自定义按钮。 单击按钮只会切换开/关状态,并且 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()' 但没有成功,对性能没有影响。
如何进一步优化它?
感谢您的帮助。
最佳答案
这个延迟是故意放在那里的。它应该在 300 毫秒左右。
无论人们认为混合应用程序与原生应用程序相比有很多缺点。在这种情况下,问题是点击事件检测与滑动事件。如果这两个 Action 都是即时的,应用程序无法识别什么是点击事件,什么是滑动 Action 的开始事件。因为这个滑动 Action 需要有优势,点击事件只有持续至少 300 毫秒才会起作用。
将点击事件替换为即可解决vclick 或 touchstart 事件。此事件不会遇到延迟问题。
如果您想了解更多相关信息,请查看我关于 click/vclick/tap 事件之间差异的其他答案。可以在这里找到: In jQuery mobile, what's the diff between tap and vclick?
另一方面,如果您想保留所有内容,您也可以使用名为 Fastclick 的第 3 方 jQuery Mobile 插件来解决此问题。 强>。它的作用是创建快速响应的按钮,而不会出现幽灵点击和烦人的 300ms
延迟。尝试一下,您可能会喜欢 ti。
关于android - 在 Phonegap 应用程序的 iOS/Android 设备中,按钮 css 的变化非常缓慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17585955/