Question

$('div.ui-page').live("swipeleft", function () {
    var nextpage = $(this).next('div[data-role="page"]');
    if (nextpage.length > 0) {
        $.mobile.changePage(
            nextpage,
            {transition: "slide"},
            true,
            true
        );
    }else{
        $.mobile.changePage(
            "#page3",
            {   transition: "slide", 
                reverse:true
            }, 
            true, 
            true
        );
    }
});

到目前为止，代码在桌面浏览器和iOS上运行良好。但是当我在Android设备上运行此代码时，页面会闪烁然后移动到下一页。它应该触发幻灯片切换选项，但没有显示幻灯片效果。

如何在Android网络应用或移动浏览器上设置幻灯片效果？我已经尝试了$(id).animate方法，但没有运气。我不知道应该怎么做来触发幻灯片效果。

是否有任何Android开发者已经尝试过滑动功能？谁能告诉我应该怎样做才能调整$.mobile.changePage的幻灯片效果？

Answer 1

http://jquerymobile.com/test/docs/pages/page-transitions.html

只看到渐变过渡？要查看所有转换类型，您必须位于支持3D转换的浏览器上。默认情况下，缺少3D支持的设备（如Android 2.x）将回退到所有转换类型的“淡入淡出”。此行为是可配置的（见下文）。

要检查您的Android是否支持它，请将该代码段添加到您的javascript中

window.onload = function () {
var b = document.body.style;
if(b.MozTransition=='' || b.WebkitTransition=='' || b.OTransition=='' || b.transition=='') {
    alert('supported');
} else {
    alert('NOT supported')
}

}

Answer 2

roine说的是真的。浏览器称它不支持转换。但是......让我们不同意浏览器，无论如何都要这样做。在jQuery移动改变中：

// If transition is defined, check if css 3D transforms are supported, and if not, if a fallback is specified
$.mobile._maybeDegradeTransition = function( transition ) {
        if ( transition && !$.support.cssTransform3d && $.mobile.transitionFallbacks[ transition ] ) {
            transition = $.mobile.transitionFallbacks[ transition ];
        }

        return transition;
};

为：

$.mobile._maybeDegradeTransition = function( transition ) {
    return transition;
};

你去吧。

但是你必须明白浏览器并没有说没有理由不支持它。例如，Android上的浏览器在第一次转换时会失败（不是Chrome）。

jQuery Mobile：更改页面幻灯片转换在桌面上运行良好但在Android设备上运行不正常

2 个答案: