3

私は静的ページを持っていますが、それは正常に読み込まれ、その後AJAXとJSONを使用して動的background-imageに変更されます。ユーザーが左右にスワイプするか、次へ/前へのボタンを使用すると、背景が変わります。

ページを更新しない限り、ページが開始されたときに写真が表示されないことを除いて、すべて問題ありません（F5）。.trigger('refersh')を含む多くの方法を試しまし.page('refresh')たが、すべて失敗しました。

ユーザーが左または右にスワイプするか、ナビゲーションボタンを使用するたびに同じページをロードするコードを以下に示します。

function animation() {
$.mobile.changePage( "#gallery", { // #galley is the static page ID.
allowSamePageTransition: true,
changehash: false,
transition: "flow"
});
}

これはajaxのロードを示しています。

function showmsg() {
$.mobile.showPageLoadingMsg()
setTimeout(function() {
  $.mobile.hidePageLoadingMsg()
  }, 500);
 }

HTML

<div data-role="page" class="demo-page" id="gallery">

<div data-role="header" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
    <h1>Photos Gallery</h1>
</div><!-- /header -->

<div data-role="content">   
</div><!-- /content -->

<div data-role="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
    <div data-role="controlgroup" class="control ui-btn-left" data-type="horizontal" data-mini="true">
        <a href="#" class="prev" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="d">Previous</a>
        <a href="#" class="next" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="d">Next</a>
    </div>
</div><!-- /footer -->
</div><!-- /page -->

AJAX と JQM

var ID = $('#displayid').val();
$.ajax({
Type: "GET",
url: 'photos.php',
data: { display: ID },
dataType: "json",
contentType: "application/json",
success: function(data) {
  var first = "url('" + data.items[0] + "')";
  $('[data-role="page"]').css({'background-image': first });
  var count = data.count - 1;
  var last = "url('" + data.items[count] + "')";
  console.log("last img " +data.items[0]);
  console.log("last img " +data.items[count]);
  console.log("number of photos " + count);
  var img = 0;
  var page = $(this);

  // Swipe events
  $('body').on('swiperight swipeleft', page, function (event){
      if (event.type == "swipeleft") {
          if (img == count) { $('[data-role="page"]').css({'background-image': first }); img = 0; }
          else { img++; }
          if (img >= 0 && img <= count) {
      var bg = "url('" + data.items[img] + "')";
        animation();
        showmsg();
      $('[data-role="page"]').css({'background-image': bg });
         } //if img
      } //if left
      if (event.type == "swiperight") {
          if (img == 0) { $('[data-role="page"]').css({'background-image': last }); img = 9; }
          else { img--; }
          if (img >= 0 && img <= count) {
       var bg = "url('" + data.items[img] + "')";
        animation();
        showmsg();
      $('[data-role="page"]').css({'background-image': bg });
         } //if img
         else { $('[data-role="page"]').css({'background-image': first }); img = 1; }
      } //if right 
  });// swipe event

  // .next & .prev  events
$('.next').on('click', page, function (){
    $(page).addClass("slidedown");
    if (img == count) { $('[data-role="page"]').css({'background-image': first }); img = 0; }
          else { img++; }
          if (img >= 0 && img <= count) {
      var bg = "url('" + data.items[img] + "')";
        animation();
        showmsg();
      $('[data-role="page"]').css({'background-image': bg });
 }
}); // .next
$('.prev').on('click', page, function (){
          if (img == 0) { $('[data-role="page"]').css({'background-image': last }); img = 9; }
          else { img--; }
          if (img >= 0 && img <= count) {
       var bg = "url('" + data.items[img] + "')";
        animation();
        showmsg();
      $('[data-role="page"]').css({'background-image': bg });
         } //if img
         else { $('[data-role="page"]').css({'background-image': first }); img = 1; }
 }); // .prev
 } // success
}); //ajax

画像を表示するために初期ロード時にページを更新するにはどうすればよいですか? または、静的ページをシステム生成のページに変更する必要がありますか?

4

1 に答える 1

1

これは問題です。

正しいページ読み込みイベント中に ajax 呼び出しがトリガーされなかったため、ページが DOM に読み込まれなかったため、最初のページ読み込み中にスワイプ イベントがバインドされませんでした。

更新中 (2 回目のページの読み込み)、ページは既に DOM にあり、すべて正常に動作しています。

この問題を修正するには、ajax 呼び出しを次のようにラップします。

$(document).on('pagebeforeshow', '#gallery', function(){      
    //your ajax call should go here
});
于 2013-03-04T16:45:59.617 に答える