jquery.mobile commonlayout_jquery에서 발생한 문제 요약
- WBOY원래의
- 2016-05-16 16:14:58963검색
최근 프로젝트에서는 jquery.mobile을 사용하여 휴대폰에 간단한 디스플레이를 만들었습니다. 나는 이전에 이 프레임워크에 대해서만 알고 있었지만 한번도 사용해 본 적이 없습니다.
특히 이벤트 바인딩 측면에서 데스크톱 시스템에 비해 브라우저는 온갖 불편함을 느끼고 요점을 파악하지 못합니다.
아래와 같이 백엔드 시스템 작업을 할 때 왼쪽에는 일반적으로 확장 및 접을 수 있는 모듈과 하위 메뉴 항목이 채워져 있습니다.
누적된 리뷰에서 문제가 발생합니다. 페이지를 재사용하기 위해 댓글 표시를 위해 누적된 리뷰에 iframe을 삽입합니다.
첫 번째 문턱
모바일 WEB 개발 경험이 있는 학생들은 IOS 브라우저의 iframe에 콘텐츠가 너무 많으면 스크롤바가 나타나지 않고 콘텐츠가 잘리는 것처럼 보일 수 있다는 점을 알아야 합니다.
정보를 확인해보니 결국 휴대폰 화면이 작아요. 댓글이 많을 때는 컴퓨터 브라우저의 페이지처럼 페이지 넘김 버튼이 한 줄로 생기는 게 불가능하거든요. 정말 나쁘다.
요즘은 롤링 로딩이 일반적으로 사용됩니다. 먼저 DEMO를 작성하고 컴퓨터에서 실행해 보세요. 휴대폰을 바꿔서 먼저 안드로이드폰으로 시도해 보았는데 잘 될 것 같습니다.
iPhone으로 전환하면 스크롤 막대 문제만 해결되었지만 스크롤 로딩은 여전히 남아 있습니다. 계속해서 스와이프를 했는데도 반응이 없어서 마음이 서늘해졌습니다. 여기서 이상한 말을 하고 싶습니다. QQ와 WeChat에서는 허용됩니다. 정말 이상합니다.
이렇게 계속 낭비하면 결과가 없으니 다른 방법을 찾아야 합니다. 첫 번째 생각은 이 작업을 별도의 페이지에서 수행하는 것이었습니다. 그래서 우리는 두 번째 문턱을 만났습니다.
~ > gt;누적 평가
~ >
이렇게 멍청할 건가요? 동료들에게 이런 문제가 발생한 적이 있는지 물었더니 rel="external"을 추가하면 괜찮을 것이라고 했지만 실제로는 작동하지 않았습니다. 따라서 코드는 다음과 같습니다.
~ > rel="external">누적 평가
~ >
참고: rel='external'은 새 페이지에서 열림을 의미하는 target=''_blank''와 유사합니다
collapsible listview 두 파트너는 서로 호환되지 않으며 더 나은 레이아웃 효과를 얻을 수 없습니다. 땜질하는 동안 빈 축소 가능 항목을 추가했는데 작동했습니다. 드디어 모였습니다. 접을 수 있는 아이콘은 기본으로 되어 있으며, 리스트뷰 항목은 아이콘을 통일하기 위한 오른쪽 화살표입니다. 기본적으로 누적평가는 위 그림과 같지 않습니다.
코드 복사
이 문제가 해결되었습니다. 전체 페이지는 다음과 같습니다.
코드 복사