adaptación de la altura de la barra de navegación superior personalizada del subprograma uniapp

Tabla de contenido

Introducción a la barra de navegación personalizada:

Uso de la barra de navegación personalizada

paso 1: cancelar la barra de navegación nativa predeterminada

Paso 2: agregue elementos de marcador de posición a la página

---

Introducción a la barra de navegación personalizada:

        Generalmente se utiliza para rellenar imágenes, etc. u otras necesidades especiales. Si utiliza un color sólido para rellenar la barra superior, puede utilizar directamente navigationBarBackgroundColor para completarlo.

archivo page.json:

"navigationBarBackgroundColor": "#FED000"

Efecto:

Uso de la barra de navegación personalizada

paso 1: cancelar la barra de navegación nativa predeterminada

Agregar código al estilo de la página del archivo page.json

"navigationStyle":"custom"

Paso 2: agregue elementos de marcador de posición a la página

Las huellas incluyen:

        <!-- 状态栏高度 -->
        <view :style="{ height: `${statusBarHeight}px` }"></view>
        <!-- 自定义导航栏高度 并 居中 -->
        <view :style="{
          height: `${barHeight}px`,
          'line-height': `${barHeight}px`,
          'text-align': 'center',
        }">
            <text>评价</text>
        </view>

onLoad() {
    // 状态栏高度
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight; 
    // 胶囊数据
    const { top, height } = wx.getMenuButtonBoundingClientRect();
    // 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
    this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
},