1. Establecer la página de inicio
Abra el subprograma WeChat e ingresará la primera página en páginas, por lo que solo necesita escribir la página de inicio en el primer elemento de páginas en páginas.json
2. Retire la barra de navegación para lograr un efecto de visualización de pantalla completa
Primero borre el título de la barra de navegación global y agregue el siguiente código en la página que debe estar en pantalla completa:
"estilo": { "estilo de navegación": "personalizado" }
Para obtener más información, consulte los documentos relacionados con uniapp: enrutamiento de páginas pages.json | sitio web oficial de uni-app
3. Barra de navegación de marcador de posición
Si el contenido de la página se mueve hacia arriba después de eliminar la barra de navegación, puede resolverlo agregando un elemento de marcador de posición:
La clave es agregar los siguientes estilos css a los elementos de marcador de posición:
.status_bar { height: var(--status-bar-height); // Obtenga la altura de la barra de estado del teléfono (la línea en la parte superior de la pantalla de la batería) width: 100%; }
4. Establecer el color de fondo de la pantalla completa
Demostración de error: establece directamente el color de fondo en el elemento raíz, altura: 100%, no tiene efecto, solo la parte que se estira por el contenido tiene el color de fondo
.contenido { altura: 100%;
color de fondo: #eaf1ff;
pantalla: flexible;
dirección de flexión: columna;
alinear elementos: centro;
}
La forma correcta: establezca la altura mínima de la pantalla al 100% de la altura de la pantalla
El contenido no ocupa toda la pantalla, y la altura también es del 100%
El contenido excede toda la pantalla y la altura se determina de acuerdo con la altura del contenido.
.content { min-altura: 100vh;
color de fondo: #eaf1ff;
pantalla: flexible;
dirección de flexión: columna;
alinear elementos: centro;
}
