WeChat의 내장 브라우저를 사용하여 드롭다운 상자를 클릭하면 페이지가 무작위로 이동합니다(iphone) 어떻게 해야 합니까_jquery.

관련 자료: WeChat 결제가 내장 브라우저를 사용하여 H5 페이지 결제를 구현하는 방법

장면 재현:

제가 즐거운 마음으로 짐을 싸고 퇴근 준비를 하고 있을 때 테스트 부서의 소녀가 다가와서 버그에 대해 언급했습니다. "iPhone에서는 드롭다운 상자를 클릭하면 페이지가 무작위로 이동합니다." 안드로이드는 이런 문제가 없습니다. 그리고 점프 페이지는 하단 메뉴에서 몇 페이지 밖에 되지 않습니다. "프로젝트가 급하기 때문에 편집자는 남아서 문제를 해결할 수 있습니다. 다시 테스트를 하신 후, 가능한 원인(공식 버전과 테스트 버전의 코드가 일치하지 않고, 페이지의 HTML 코드가 헷갈리고, CSS 코드가 잘못된 경우)을 에디터가 하나씩 확인해보았으나 문제가 해결되지 않았습니다. . 간단한 선택으로 어떻게 문제가 발생할 수 있습니까? (현재까지 문제의 원인은 발견되지 않았습니다)

문제의 원인을 찾을 수 없기 때문에 해결 방법이 있는지만 먼저 알아볼 수 있습니다. 선택 작업을 여러 번 디버깅하고 캡처한 후에 해결책을 찾았습니다. 원리는 간단합니다. div를 사용하여 선택을 시뮬레이션합니다.

해결책:

아이디어도 비교적 명확합니다. 페이지에는 두 개의 HTML 구조가 있는데, 하나는 평소대로 작성된 선택 코드(display:none은 처음에 숨겨진 상태임)이고, 다른 하나는 div를 클릭했을 때 표시되는 시뮬레이션된 div입니다. , 선택 드롭다운 상자가 나타나고 동시에 시뮬레이션된 div에 읽기 옵션 값이 제공되며 해당 시뮬레이션 코어 코드는 VisualSelect.js에서 다운로드할 수 있습니다

html 코드

<div class=”visualSelect” >商行</div>
<select class=”round” style=”display:none;”>
 <option value=”1”>国股</option>
 <option value=”2”>商行</option>
 <option value=”3”>其他</option>
</select> 

CSS 코드

.round { border-radius: 4px;}
.visualSelect {
 width: 100%;
 padding: .45rem .5rem .25rem .75rem;
 margin-bottom: .875rem;
 border: 1px solid #ddd;
 border-radius: 4px;
 color: #bbb;
} 

js 코드

참고: 이 문제는 일부 iPhone에서만 발생하므로 Android 휴대폰에서는 문제가 없으므로 모델을 결정하는 것이 가장 좋습니다.

var agent = navigator.userAgent;
if ( agent.indexOf(“iPhone”) > -1) {
 $(“select”).VisualSelect(); //调用插件即可
}

PS: 부트스트랩 스크롤 모니터링은 iPhone WeChat의 내장 브라우저에서 작동할 때도 있고 작동하지 않을 때도 있습니다

Bootstrap은 Affix에 대한 추가 탐색을 작성했습니다(왼쪽 탐색 표시줄, 오른쪽 데이터, 두 개의 열로 구분됨). Android 휴대폰에서는 WeChat 내장 브라우저에서 스크롤하고 듣는 것이 정상입니다. iPhone에 내장된 WeChat 브라우저에서는 모니터링할 수 있을 때도 있고, 모니터링할 수 없을 때도 있습니다. 이유는 무엇인가요?

해결책:

이유는 HTML5로 작성된 웹 페이지에서는 iPhone이 제때에 응답하지 않기 때문입니다. jQuery 모바일을 사용하는 것이 가장 좋습니다.