Na empresa participei de um projeto misto de desenvolvimento de APP nativo e fui responsável pela parte h5 do projeto da seguinte forma:
perguntas específicas Pergunta 1: Problema na barra de rolagem da páginaDescrição do problema
A página da web possui barras de rolagem ao navegar em um navegador de PC, porém, quando é aberta em um navegador móvel, não há barra de rolagem.
Solução
Defina a camada mais externa da página (quando escrevo uma página, geralmente escrevo um contêiner grande na tag body para armazenar o conteúdo da página set overflow:auto/scroll e não posso definir o valor do atributo height (); altura:100% De jeito nenhum também)
exemplo
<body> <div style=overflow:scroll/auto;> //Conteúdo da página da Web</div></body>Pergunta 2: Uso de eventos touchstart e touchend
Descrição do problema
Quando o arquivo touch.js é introduzido e os eventos touchstart e touchend são usados para obter efeitos interativos, o problema de falha no acionamento de eventos ocorre em alguns telefones celulares [por exemplo: telefones celulares Honor de versão inferior]
Solução
Método 1: use removeEventListener e addEventListener juntos
Método 2: Adicione e.preventDefault(); para evitar que alguns telefones celulares saltem por padrão
Método 3: Jquery's on implementa vinculação de eventos
Nota: O Método 1 e o Método 2 são JS nativos usando addEventListener para implementar a escuta de eventos e quando o elemento dom usa eventos touchstart e touchend, ele precisa ser usado em conjunto com a ligação ou escuta de eventos, caso contrário, a parte js lançará um exceção.
código
//Método 1: document.getElementById('list5').addEventListener('touchstart',callback, false);document.getElementById('list5').removeEventListener('touchstart',callback, false);document.getElementById(' list5').addEventListener('touchend',retorno de chamada, false);document.getElementById('list5').removeEventListener('touchend',callback, false);//Método 2: document.getElementById('list5').addEventListener('touchstart',function(e){ e. preventDefault();}, false);document.getElementById('list5').addEventListener('touchend',function(e){ e.preventDefault();}, false); Pergunta 3: problema de travamento ao pressionar longamenteRestauração de cenário
Há uma página de lista XXX Ao manter pressionado um item da lista na página da lista (tocar no texto), ocorrerá um travamento em telefones celulares de versão inferior.
Solução
parte js: adicione e.preventDefault();
parte css: adicione código que proíbe a cópia de texto
código
//parte js: e.preventDefault(); //parte css: -webkit-touch-callout: none; //Solução para travar //Desativar cópia -moz-user-select: none;-khtml-user-select: nenhum; seleção de usuário: nenhum;Pergunta 4: Problema com 1px no terminal móvel
Descrição do problema
Como telefones diferentes têm densidades de pixels diferentes, 1px em CSS não é equivalente a 1px em dispositivos móveis. No projeto, js e rem são utilizados para adaptação da tela do celular, então ocorre uma situação de 0,5px, fazendo com que a versão inferior do celular não consiga exibir a borda de 0,5px.
Solução
Use css para resolver o problema de 1px e escreva diretamente: border-width:1px no elemento dom que precisa ser definido como 1px;
código
//Parte HTML: <div class='class1'></div>//css part: .class1{ border: 1px solid #ccc;}//css part/*Problema com exibição normal de 1px no início do terminal móvel */% border-1px{ display: posição do bloco:absoluta esquerda: 0; conteúdo: ' ';}.border-1px{ posição: relativo; %border-1px; border-top: 1px sólido #ccc; } &::before{ @extend %border-1px; webkit-min-device-pixel-ratio:1,5),(min-device-pixel-ratio:1,5){ .border-1px{ &::after{ -webkit-transform: escalaY(0,7); transformação: escalaY(0,7);@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio); :2){ .border-1px{ &::after{ -webkit-transform: escalaY(0,5); }}/*O problema da exibição normal de 1px no terminal móvelend*/ Problema 5: js não consegue analisar corretamente o valor do parâmetro do URL que contém o sinal =Descrição do problema
No projeto, como o valor do parâmetro da solicitação de dados é obtido do endereço da url e o valor do parâmetro contém o sinal =, o valor do parâmetro não pode ser analisado corretamente (ps:js usa o sinal = para separar os parâmetros da url )
Solução
Transcodifique o URL e, em seguida, decodifique-o [Neste projeto, o APP fornece o endereço do URL transcodificado e o front-end usa o plug-in geturlparams para obter o valor do parâmetro do endereço do URL]
código
//Decodificar = número dom.token = decodeURI($.query.get(token)); //Plug-in //Obter o valor sem decodificar dom.msgid = $.query.get(msgid);Pergunta 6: A escuta de eventos js nativos e a ligação de eventos jquery são inválidas no iOS
Descrição do problema
Ao usar a escuta de eventos ou a vinculação de eventos, o acionamento do evento no iOS é inválido porque o elemento pai seleciona o corpo ou o elemento do documento.
Solução
Não use elementos de corpo e documento como elementos pai
Pergunta 7: A data é exibida como NaN no iOSDescrição do problema
O formato de data de Date tem problemas de compatibilidade no ios. A data no ios será exibida como: NaN.
Solução
Solução: 2017/12/26 19:36:00 é compatível com ios, mas 2017-12-26 19:36:00 o formato não é compatível. O último formato exibe Nan no ios (pode ser exibido normalmente no Android) )
código
var time = 2017-12-26 19:36:00;time = time.replace(//-/g, /);//Converta o '-' no formato de hora para o formato '/', compatível com iOSPergunta 8: Há um problema com o evento click no iOS
Descrição do problema
Quando o evento de clique for acionado por um clique do iOS, o módulo do elemento pai da delegação do evento será selecionado [isto é: devido ao borbulhamento do evento e o pai tem um estilo padrão], e haverá uma camada transparente, por exemplo
<ul> <li>Item da lista 1</li> <li>Item da lista 2</li> <li>Item da lista 3</li></ul>
Análise: Por exemplo, quando um usuário iOS clica no item 1 da lista, o UL da camada pai terá um estilo transparente.
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.