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