jQueryMobile을 사용하여 슬라이딩 페이지 넘기기 효과를 얻는 방법_jquery

이 기사의 예에서는 jQueryMobile을 사용하여 슬라이딩 페이지 넘김 효과를 얻는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

스와이프 동작은 모바일 기기에서 매우 인기가 있으며 모바일 기기에서 페이지를 넘기기 위해 스와이프하는 데 매우 일반적입니다

이 기능은 jQueryMobile에서 구현할 수 있지만, 모바일 브라우저에 있기 때문에 이전 글 [jQuery 모바일 브라우저에서 액션 드래그의 어려움 분석]의 견해에 개인적으로 동의합니다. 는 안드로이드의 독립된 APP이 아니므로, 모바일 브라우저 및 모바일 시스템 자체의 제스처와 충돌을 피하기 위해 클릭 이외의 모바일 기기 제스처를 자주 사용하지 마십시오.

그렇다면 jQueryMobile을 사용하여 페이지 넘기기 슬라이딩 효과를 얻는 방법은 무엇입니까?

1. 기본 목표

다음과 같이 모바일 브라우저의 jQueryMobile 프레임 페이지에서 슬라이딩 제스처 페이지 넘김 기능을 구현합니다.

그리고 현재 페이지의 페이지 수를 기록하며, 사용자가 슬라이드함에 따라 자동으로 증가하거나 감소합니다.

2. 제작과정

JqueryMobile의 인터페이스 구성 방법에 대해서는 자세한 내용은 이전 글 [Helloworld 및 jQueryMobile의 페이지 전환 방법]

을 참조하시기 바랍니다.

다음 코드 주석은 주로 JqueryMobile, W3C에서 캡슐화된 jQuery Mobile Swipeleft 및 jQuery Mobile Swiperight 슬라이딩 제스처를 처리하여 위 페이지를 구현하는 방법을 설명합니다. "jQuery Mobile Touch Events" 이에 대한 설명은 문제가 있습니다. , 그리고 실험 코드는 주어진 코드와 일치하지 않습니다:

코드 복사 코드는 다음과 같습니다.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 
 

 
   

Title

 
 
 

 
 
 

 
     

 
       

你好1

 
     

 
     

 
       

你好2

 
     

 
     

 
       

你好3

 
     

 
     

 
       

你好4

 
     

 
       
     

 
        /4 
     

 
 

 
 
 

 
     

 
     

 
       
• a
 
       
• b
 
       
• c
 
     

 
   

 
     
 

  

  

/* jquery 부분에서 먼저 몇 페이지를 넘겼는지 기록하는 변수를 정의합니다 */
var divnum=1; /* .innerhtml=""과 동일합니다. jquery는 다음과 같이 노드의 값을 설정해야 합니다. */
$("#divnumber").text(divnum)
/* #mypage에서 터치 활성화 */
$(document).on("pageinit","#mypage",function(){
/* div1의 비어 있지 않은 부분을 왼쪽으로 밀면 div1이 숨겨지고 div2가 표시되며 페이지 카운터가 1이 되고 divnumber의 인라인 텍스트가 업데이트됩니다 */
           $("#div1").on("swipeleft",function(){ 
               $("#div1").hide("빠름")
                $("#div2").show("빠른")
divnum=divnum 1
                  $("#divnumber").text(divnum)
         });
/* div2의 공백이 아닌 부분을 오른쪽으로 밀면 div1이 표시되고 div2는 숨겨지며 페이지 카운터는 -1이 되고 divnumber의 인라인 텍스트가 업데이트됩니다 */
             $("#div2").on("swiperright",function(){                                                    $("#div1").show("빠른")
               $("#div2").hide("빠름")
            divnum=divnum-1;
                  $("#divnumber").text(divnum)
         });
/* div2의 비어 있지 않은 부분을 왼쪽으로 밀면 div2가 숨겨지고 div3이 표시되며 페이지 카운터는 1이 되고 divnumber의 인라인 텍스트가 업데이트되는 등의 작업이 수행됩니다. */
          $("#div2").on("swipeleft",function(){ 
               $("#div2").hide("빠름")
               $("#div3").show("빠른")
              divnum=divnum 1;
                  $("#divnumber").text(divnum)
         });
           $("#div3").on("swiperright",function(){ 
                $("#div2").show("빠른")
               $("#div3").hide("빠름")
            divnum=divnum-1;
                  $("#divnumber").text(divnum)
         });
           $("#div3").on("swipeleft",function(){ 
                $("#div3").hide("빠름")
               $("#div4").show("빠른")
              divnum=divnum 1;
                 $("#divnumber").text(divnum)
         });
             $("#div4").on("swiperright",function(){                                                  $("#div3").show("빠른")
               $("#div4").hide("빠름")
            divnum=divnum-1;
                 $("#divnumber").text(divnum)
                                                      })

div1은 첫 페이지이기 때문에 오른쪽으로 스와이프 동작이 없고, div4는 마지막 페이지이기 때문에 왼쪽으로 스와이프 동작이 없다는 점 참고해주세요.

이 기사가 모든 사람의 jQueryMobile 프로그램 설계에 도움이 되기를 바랍니다.