En el desarrollo con uniapp, uno de los desafíos más recurrentes es lograr que la barra de navegación inferior (tabbar) se visualice correctamente en la diversidad de dispositivos móviles actuales. Problemas como botones ocultos por la barra de inicio en modelos con pantalla completa o desajustes en el diseño son comunes. En el framework unibest, el componente wd-tabbar ofrece herramientas precisas para solucionar estos inconvenientes mediante el manejo del área segura (Safe Area).

Funadmentos del Área Segura (Safe Area)

El "Área Segura" se refiere a la zona de la pantalla que está libre de interferencias físicas o de software, como notches, esquinas redondeadas o indicadores de navegación del sistema oeprativo. Para garantizar una experiencia de usuario fluida, el tabbar debe adaptarse dinámicamente a este espacio.

El componente wd-tabbar utiliza la propiedad safe-area-inset-bottom para esta gestión, admitiendo tres tipos de valores:

• Booleano (true): El componente calcula automáticamente el margen basándose en la información del sistema.
• Booleano (false): Se ignora el área segura, posicionando el componente al borde absoluto de la pantalla.
• Cadena (string): Permite definir un valor específico (por ejemplo, "20px") para un control manual total.

Configuración según la Estrategia de Navegación

En unibest, la gestión del área segura depende directamente de la estrategia de tabbar seleccionada en la configuración global.

// Definición de estrategias de navegación
export enum TipoEstrategiaNavegacion {
  SIN_TABBAR = 0,
  NATIVO = 1,
  PERSONALIZADO_CON_CACHE = 2,
  PERSONALIZADO_SIN_CACHE = 3
}

1. Implementación en Modo Nativo

Si se utiliza la estrategia nativa (TipoEstrategiaNavegacion.NATIVO), el control reside principalmente en el archivo pages.json. Sin embargo, unibest permite inyectar configuraciones para asegurar la compatibilidad.

// Ejemplo de configuración para tabbar nativo
export const configuracionNativa = {
  selectedColor: '#2c3e50',
  backgroundColor: '#ffffff',
  borderStyle: 'white',
  height: '55px',
  // Activación del ajuste automático para dispositivos con notch
  safeAreaInsetBottom: true 
};

2. Implementación en Modo Personalizado

Para tabbar personalizados, el control se desplaza directamente al componente Vue, permitiendo una lógica más flexible basada en las características del dispositivo.

<template>
  <wd-tabbar
    v-model="estadoTab.indiceActivo"
    :list="listaNavegacion"
    :safe-area-inset-bottom="ajusteSeguridad"
    :height="alturaComponente"
    @change="alCambiarTab"
  ></wd-tabbar>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const ajusteSeguridad = ref(true);
const alturaComponente = ref('52px');

onMounted(() => {
  const infoSistema = uni.getSystemInfoSync();
  
  // Lógica específica para modelos determinados
  if (infoSistema.model.includes('iPhone')) {
    // Forzar un valor específico en dispositivos iOS si es necesario
    ajusteSeguridad.value = infoSistema.safeAreaInsets?.bottom ? true : '15px';
  } else if (infoSistema.platform === 'android') {
    // En Android, a veces es preferible un margen fijo pequeño
    ajusteSeguridad.value = '10px';
  }
});
</script>

Gestión de Tabbar con Botón Central Sobresaliente

Cuando el diseño incluye un botón central prominente (estilo "bulge"), el cálculo del área segura requiere una atención especial para no romper la estética ni la usabilidad.

// Estructura de datos para un tabbar con botón especial
export const itemsNavegacion = [
  { text: 'Inicio', icon: 'home', pagePath: '/pages/index/index' },
  { 
    isBulge: true, 
    icon: 'plus-circle', 
    text: 'Añadir',
    pagePath: '/pages/action/add' 
  },
  { text: 'Perfil', icon: 'user', pagePath: '/pages/profile/index' }
];

Para estos casos, es recomendable ajustar el CSS para que el contenedor del área segura no interfiera con el sombreado o la elevación del botón central:

<style lang="scss">
.wd-tabbar__bulge-container {
  /* Compensación manual para evitar solapamiento con el área del sistema */
  padding-bottom: env(safe-area-inset-bottom);
  
  &::before {
    content: "";
    display: block;
    height: 10px; /* Margen extra de seguridad para el botón flotante */
  }
}
</style>

Ajustes Dinámicos por Escenario

Existen situaciones donde el área segura debe cambiar en tiempo de ejecución. Aquí se presentan los casos más comunes:

• Cambio de orientación: Al rotar a modo horizontal, el área segura suele reducirse a 0 en la parte inferior pero aparece en los laterales.
• Interacción con el scroll: Se puede minimizar el tabbar al hacer scroll hacia abajo para ganar espacio visual.

// Listener para cambios en las dimensiones de la ventana
uni.onWindowResize((res) => {
  if (res.size.windowWidth > res.size.windowHeight) {
    // Modo horizontal: reducimos la altura y el margen
    ajusteSeguridad.value = '5px';
    alturaComponente.value = '45px';
  } else {
    // Retorno a modo vertical
    ajusteSeguridad.value = true;
    alturaComponente.value = '55px';
  }
});

Referencia de Adaptación por Plataforma