jQuery mobile同じページへの遷移

Question

私は製品の詳細な見解を持っています。私がこの詳細ビューに入っているとき、左右にスワイプして次の製品または前の製品をロードできます。前のアイテムを読み込むときに、次のスワイプ左のアニメーションを読み込むときにスワイプ右のアニメーションが必要です。これは、次の/前のアイテムを完全にロードしますが、アニメーションは使用しません。

var element = document.getElementById("product_detail_page"); 
var mc = new Hammer(element); 
mc.on("swipeleft", function (ev) { 
    var now_index = current_index - 1; 
    if (now_index >= 0) { 
     current_index--; 
     show_product(now_index, true); 
    } 
}); 
mc.on("swiperight", function (ev) { 
    var now_index = current_index + 1; 
    if (now_index >= 0 && now_index < products.length - 1) { 
     current_index++; 
     show_product(now_index, false); 
    } 
}); 


function show_product(index, rev) { 
var v = products[index]; 
$.mobile.changePage($("#product_detail_page"), {transition: 'slide', reverse: rev }); 
$("#product_detail_headline").text(v.product_title); 
$("#product_detail_image").attr("href", v.product_image); 
$("#product_detail_image").find("img").attr("src", v.product_image); 

$("#product_details_description").html(v.product_description); 
$("#product_details_price_text").text(v.product_price + " €"); 
$("#add_to_merkliste").attr("data-id", v.product_id); 

$(".merkliste_button_text").text("Zur Merkliste hinzufügen"); 
$("#add_to_merkliste").find("i").addClass("zmdi-star-outline").removeClass("zmdi-star").removeClass("yellow"); 


$.each(merkliste, function (index, value) { 
    if (value.product_id == v.product_id) { 
     $(".merkliste_button_text").text("Von Merkliste entfernen"); 
     $("#add_to_merkliste").find("i").addClass("zmdi-star").removeClass("zmdi-star-outline").addClass("yellow"); 
    } 
}); 

if (localStorage.getItem("show_prices") == "off") { 
    $("#product_details_price_wrapper").hide(); 
} else { 
    $("#product_details_price_wrapper").show(); 
} 

if (v.product_price.length < 1) { 
    $("#product_details_price_wrapper").hide(); 
} else { 
    $("#product_details_price_wrapper").show(); 
} 

}

Answer 1

試してみてください。

$.mobile.changePage($("#product_detail_page"), {transition: 'slide', reverse: rev, allowSamePageTransition: true }); 

参考：

$(":mobile-pagecontainer").pagecontainer("change", "#product_detail_page", { transition: 'slide', reverse: rev, allowSamePageTransition: true }); 

：あなたはjQM 1.4.xのを使用している場合 http://api.jquerymobile.com/jQuery.mobile.changePage/

、その後、あなたはpagecontainerウィジェットを使用する必要があります

リファレンス：http://api.jquerymobile.com/pagecontainer/#method-change