Cara menggunakan jQueryMobile untuk mencapai effect_jquery perubahan halaman gelongsor

Contoh dalam artikel ini menerangkan cara menggunakan jQueryMobile untuk mencapai kesan perubahan halaman gelongsor. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Gerak isyarat gelongsor sangat popular pada peranti mudah alih dan sangat biasa dalam meleret untuk membelok halaman pada peranti mudah alih

Walaupun fungsi ini boleh dilaksanakan dalam jQueryMobile, saya secara peribadi bersetuju dengan pandangan dalam artikel sebelumnya [Analisis kesukaran menyeret tindakan dalam pelayar mudah alih jQuery], kerana ini adalah dalam penyemak imbas mudah alih. dalam penyemak imbas bukanlah APP bebas Android, jadi jangan kerap menggunakan gerak isyarat peranti mudah alih selain daripada mengklik untuk mengelakkan konflik dengan gerak isyarat penyemak imbas mudah alih dan sistem telefon mudah alih itu sendiri.

Jadi, bagaimana untuk menggunakan jQueryMobile untuk mencapai kesan halaman gelongsor?

1. Matlamat asas

Realisasikan fungsi memusing halaman gerak isyarat gelongsor dalam halaman bingkai jQueryMobile dalam penyemak imbas mudah alih, seperti ditunjukkan di bawah:

Dan merekodkan bilangan halaman pada halaman semasa, yang secara automatik akan meningkat dan berkurangan apabila pengguna meluncur.

2. Proses pengeluaran

Saya tidak akan menerangkan secara terperinci tentang cara mengatur antara muka JqueryMobile Untuk butiran, sila baca artikel sebelumnya [Helloworld dan kaedah penukaran halaman jQueryMobile]

Komen kod berikut terutamanya menerangkan cara melaksanakan halaman di atas dengan memproses gerak isyarat gelongsor jQuery Mobile Swipeleft dan jQuery Mobile Swiperight yang dikapsulkan oleh JqueryMobile, W3C "jQuery Mobile Touch Events" Penerangan mengenai perkara ini bermasalah , dan kod percubaan tidak konsisten dengan kod yang diberikan:

Salin kod Kod adalah seperti berikut:

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 
 

 
   

Title

 
 
 

 
 
 

 
     

 
       

你好1

 
     

 
     

 
       

你好2

 
     

 
     

 
       

你好3

 
     

 
     

 
       

你好4

 
     

 
       
     

 
        /4 
     

 
 

 
 
 

 
     

 
     

 
       
• a
 
       
• b
 
       
• c
 
     

 
   

 
     
 

  

  

/* Dalam bahagian jquery, mula-mula tentukan pembolehubah yang merekodkan bilangan halaman yang telah dihidupkan */
var divnum=1; /* Bersamaan dengan .innerhtml=""; jquery perlu menetapkan nilai nod seperti ini */
$("#divnumber").teks(divnum)
/* Dayakan sentuhan pada #mypage */
$(document).on("pageinit","#mypage",function(){
/* Jika anda meluncur bahagian bukan kosong div1 ke kiri, maka div1 akan disembunyikan, div2 akan dipaparkan, dan pembilang halaman akan menjadi 1, dan teks sebaris divnumber akan dikemas kini */
          $("#div1").on("swipeleft",function(){ 
                $("#div1").sembunyikan("cepat");                 $("#div2").tunjukkan("cepat"); divnum=divnum 1;                  $("#divnumber").teks(divnum)
         }); 
/* Jika anda meluncur bahagian bukan kosong div2 ke kanan, maka div1 akan dipaparkan, div2 akan disembunyikan, dan pembilang halaman akan menjadi -1, dan teks sebaris divnumber akan dikemas kini */
             $("#div2").on("swiperright",function(){                                                          $("#div1").tunjukkan("cepat");                $("#div2").sembunyikan("cepat");             divnum=divnum-1;  
                 $("#divnumber").teks(divnum)
         }); 
/* Jika anda meluncur bahagian bukan kosong div2 ke kiri, maka div2 akan disembunyikan, div3 akan dipaparkan, dan pembilang halaman akan menjadi 1, dan teks sebaris divnumber akan dikemas kini, dan seterusnya */
           $("#div2").on("swipeleft",function(){ 
               $("#div2").sembunyikan("cepat");                $("#div3").tunjukkan("cepat"); divnum=divnum 1;                  $("#divnumber").teks(divnum)
         }); 
          $("#div3").on("swiperright",function(){ 
                $("#div2").tunjukkan("cepat");                 $("#div3").sembunyikan("cepat");             divnum=divnum-1;  
                 $("#divnumber").teks(divnum)
         }); 
          $("#div3").on("swipeleft",function(){ 
                $("#div3").sembunyikan("cepat");                $("#div4").tunjukkan("cepat"); divnum=divnum 1;                  $("#divnumber").teks(divnum)
         }); 
            $("#div4").on("swiperright",function(){ 
               $("#div3").tunjukkan("cepat");                $("#div4").sembunyikan("cepat");             divnum=divnum-1;  
                 $("#divnumber").teks(divnum)
                                                  });

Bitte beachten Sie, dass div1 nicht über eine Wischgeste nach rechts verfügt, da dies die erste Seite ist, und div4 nicht über eine Wischgeste nach links verfügt, da es die letzte Seite ist.

Ich hoffe, dass dieser Artikel für das jQueryMobile-Programmdesign aller hilfreich sein wird.