[uni-app] Dos métodos para configurar el ícono grande en el medio de la barra de pestañas en la interfaz de la aplicación: el uso de midButton; el uso de iconfont

prefacio

Cuando estaba escribiendo una aplicación recientemente, necesitaba configurar el botón de liberación en el medio de la barra de navegación de la barra de pestañas en un ícono grande, así que estudié esta función con otro compañero mío. midButtonHay dos métodos de implementación: ①ampliar el ícono configurando la propiedad y uni.onTabBarMidButtonTaprealizar el salto de página llamando; ②convertir el ícono en un ícono de fuente configurando tabbar-listla propiedad correspondiente . iconfontLa implementación específica es la siguiente.

Método 1: uso de midButton

Documentación oficial: enrutamiento de página pages.json –tabbar

Descripción oficial:

Documentación oficial: uni.onTabBarMidButtonTap(CALLBACK)

Instrucciones de uso:

uniappEl midButtonatributo de lanzamiento oficial se puede utilizar para personalizar el estilo del botón central. Al usarlo, listdebe ser un número par, es decir, tabbar-listel número de navegación definido en la matriz es un número par. Y midButtonno hay ningún atributo en pagePath, por lo que debemos llamar uni.onTabBarMidButtonTap()para realizar el salto de página ( uni.onTabBarMidButtonTapsolo se admite la aplicación, por lo que si necesita midButtonsaltar, recuerde agregar un juicio condicional).

Visualización de código:

paginas.json

{
    
    
...
"tabBar": {
    
    
    "custom": true,
    "color": "#000000",
    "backgroundColor": "#f0f0f0",
    "selectedColor": "#a9f3f8",
    "borderStyle": "#f0f0f0",
    "list": [{
    
    
        "pagePath": "pages/examdata/examdata",
        "text": "资料",
        "iconPath": "/static/tabBar/examdata.png",
        "selectedIconPath": "/static/tabBar/examdataActive.png"
      },
      {
    
    
        "pagePath": "pages/treehole/treehole",
        "text": "树洞",
        "iconPath": "/static/tabBar/treehole.png",
        "selectedIconPath": "/static/tabBar/treeholeActive.png"
      },
      {
    
    
        "pagePath": "pages/tutorship/tutorship",
        "text": "辅导",
        "iconPath": "/static/tabBar/tutorship.png",
        "selectedIconPath": "/static/tabBar/tutorshipActive.png"
      },
      {
    
    
        "pagePath": "pages/mypage/mypage",
        "text": "我的",
        "iconfont": {
    
    
          
        },
        "iconPath": "/static/tabBar/mypage.png",
        "selectedIconPath": "/static/tabBar/mypageActive.png"
      }
    ],
    "midButton": {
    
    
      "width": "60px",
      "height": "60px",
      "iconWidth": "50px",
      "iconPath": "/static/tabBar/release.png"
    }
  },
  ...
}

aplicación.vue

<script>
  export default {
    
    
    onLaunch: function() {
    
    
      console.log('App Launch')
      //在
      uni.onTabBarMidButtonTap(() => {
    
    
        uni.navigateTo({
    
    
          url: '/pages/release/release',
        });
      })
    },
    onShow: function() {
    
    
      console.log('App Show')
    },
    onHide: function() {
    
    
      console.log('App Hide')
    }
  }
</script>

Mostrar resultados:

Método 2: uso de iconfont

Documento oficial: sintaxis css - icono de fuente

Pasos para el uso:

iconfont – Biblioteca de iconos de Alibaba

Cabe señalar aquí que el código del icono copiado de la biblioteca de iconos de Alibaba debe convertirse &#xea \ue.

Instrucciones de uso:

Arriba encontraremos que se iconfontpuede mostrar con éxito en el navegador incorporado, pero habrá algunos problemas con este estilo al depurar en el teléfono móvil o empaquetarlo en una aplicación. Debido al problema de adaptación de la versión de la aplicación, iconfontlos requisitos para la versión de la aplicación son relativamente altos, lo que se aplica a 3.4.4las versiones anteriores.

Los anteriores son los dos métodos que resumimos en el proceso de realización de la función.

Si está mal, por favor corrígeme!