Cómo personalizar el contenido del título del subprograma uni-app (cómo resolver el problema de que el título del subprograma no está centrado)

Descripción del problema

提示:这里描述项目中遇到的问题:
Me encontré con un problema de este tipo en el proyecto. El título del applet de WeChat abierto con la herramienta de desarrollo de WeChat está centrado, pero después de la depuración en la máquina real, el título está de hecho a la izquierda. Más tarde, verifiqué la información y descubrí que este es el título predeterminado de Android de uni a la izquierda, y los dispositivos de Apple están en el medio (esto... ¿es un amor especial para los usuarios de Android?)


solución:

Palabras clave: este título personalizado, uView,

1. Dado que desea personalizar la barra de navegación, primero debe cancelar la barra de navegación que viene con el sistema, que debe configurarse en "pages.json" en el directorio raíz de uni-app

"pages": [
{
    
    
      "path": "pages/tabbar/my/myTest",
      "style": {
    
    
        "navigationBarTitleText": "我的测试",
        "navigationBarTextStyle": "white", // 状态栏字体为白色,只能为 white-白色,black-黑色 二选一
        "navigationStyle": "custom" // 隐藏系统导航栏
      }
    },
]

2. Pruebe la barra de navegación personalizada Navbar que viene con uView en su página

<template>
  <view>
    <u-navbar
      is-back="true"
      :border-bottom="false" //是否显示导航栏左边返回图标和辅助文字
      title-color="white"
      :background="navbar_bg"
      title="我的测试"
    ></u-navbar>
  </view>
</template>
<script>
data: () => ({
    
    
    navbar_bg: {
    
    
      'background-color': 'transparent'
    }
  }),
</script>

3. De esta manera, el título puede eliminar la influencia de uni y puede centrarse tanto en Android como en Apple. Si hay otros requisitos para la parte del título, puede leer la documentación oficial de nView
inserte la descripción de la imagen aquí

Supongo que te gusta

Origin blog.csdn.net/daishu_shu/article/details/123822732
Recomendado
Clasificación