jquery.mobile commonlayout_jquery에서 발생한 문제 요약

최근 프로젝트에서는 jquery.mobile을 사용하여 휴대폰에 간단한 디스플레이를 만들었습니다. 나는 이전에 이 프레임워크에 대해서만 알고 있었지만 한번도 사용해 본 적이 없습니다.

특히 이벤트 바인딩 측면에서 데스크톱 시스템에 비해 브라우저는 온갖 불편함을 느끼고 요점을 파악하지 못합니다.

아래와 같이 백엔드 시스템 작업을 할 때 왼쪽에는 일반적으로 확장 및 접을 수 있는 모듈과 하위 메뉴 항목이 채워져 있습니다.

누적된 리뷰에서 문제가 발생합니다. 페이지를 재사용하기 위해 댓글 표시를 위해 누적된 리뷰에 iframe을 삽입합니다.

첫 번째 문턱

모바일 WEB 개발 경험이 있는 학생들은 IOS 브라우저의 iframe에 콘텐츠가 너무 많으면 스크롤바가 나타나지 않고 콘텐츠가 잘리는 것처럼 보일 수 있다는 점을 알아야 합니다.

정보를 확인해보니 결국 휴대폰 화면이 작아요. 댓글이 많을 때는 컴퓨터 브라우저의 페이지처럼 페이지 넘김 버튼이 한 줄로 생기는 게 불가능하거든요. 정말 나쁘다.

요즘은 롤링 로딩이 일반적으로 사용됩니다. 먼저 DEMO를 작성하고 컴퓨터에서 실행해 보세요. 휴대폰을 바꿔서 먼저 안드로이드폰으로 시도해 보았는데 잘 될 것 같습니다.

iPhone으로 전환하면 스크롤 막대 문제만 해결되었지만 스크롤 로딩은 여전히 ​​남아 있습니다. 계속해서 스와이프를 했는데도 반응이 없어서 마음이 서늘해졌습니다. 여기서 이상한 말을 하고 싶습니다. QQ와 WeChat에서는 허용됩니다. 정말 이상합니다.

이렇게 계속 낭비하면 결과가 없으니 다른 방법을 찾아야 합니다. 첫 번째 생각은 이 작업을 별도의 페이지에서 수행하는 것이었습니다. 그래서 우리는 두 번째 문턱을 만났습니다.

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

                           

~ > gt;누적 평가
~ >

위 내용은 누적 평가 부분에 해당합니다. 클릭 후 페이지 스타일이 완전히 엉망이 되어 js 이벤트가 실행되지 않습니다. f12로 코드를 보면 본문의 html 요소, 머리의 일부, 페이지 하단의 js를 제외하고 모두 사라졌습니다.

이렇게 멍청할 건가요? 동료들에게 이런 문제가 발생한 적이 있는지 물었더니 rel="external"을 추가하면 괜찮을 것이라고 했지만 실제로는 작동하지 않았습니다. 따라서 코드는 다음과 같습니다.

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

                           

~ > rel="external">누적 평가
~ >


참고: rel='external'은 새 페이지에서 열림을 의미하는 target=''_blank''와 유사합니다

세 번째 문턱은 제목에 언급된 문제입니다(머리 사진이 최종 효과입니다)

collapsible listview 두 파트너는 서로 호환되지 않으며 더 나은 레이아웃 효과를 얻을 수 없습니다. 땜질하는 동안 빈 축소 가능 항목을 추가했는데 작동했습니다. 드디어 모였습니다. 접을 수 있는 아이콘은 기본으로 되어 있으며, 리스트뷰 항목은 아이콘을 통일하기 위한 오른쪽 화살표입니다. 기본적으로 누적평가는 위 그림과 같지 않습니다.

코드 복사

코드는 다음과 같습니다.

이 문제가 해결되었습니다. 전체 페이지는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

   
   
   
   
   
   
   
   
   
   


   

       

           

                data-expanded-icon="arrow-u" data-collapsed-icon="arrow-d">
               

                   

医院介绍

                   

               

               

                   

套餐相关信息

                   

               

               

                   

使用须知

                   

               

               

                   

查看地图

                   

               

               

               

~ > 1px;">
                           

~ > rel="external">누적 평가
~ > ~ >

본문>




위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.