¿Cómo personalizar la barra de navegación?
Elimina la barra de navegación nativa.
- Page.json navigationBar deberá personalizar las páginas de navigationBarTitleText eliminado.
- Agregue "navigationStyle": "custom" , de modo que la barra de navegación nativa haya desaparecido, e incluso el botón Atrás no parecerá estar personalizado.
- Además, ya en 2016, WeChat ha comenzado a adaptarse a la barra de estado inmersiva. En la actualidad, casi todos los modelos de WeChat son barras de estado inmersivas, lo que significa que si bien se elimina la barra de navegación nativa, toda la pantalla se ha convertido en un programa programable. área .
- Documento: https://developers.weixin.qq.com/miniprogram/dev/extended/weui/navigation.html
Calcule navigationBarHeight.
- El botón de cápsula nativo ciertamente existe, por lo que el siguiente paso requiere que ubique la altura y la posición de la barra de navegación personalizada.
- Para diferentes modelos, para diferentes sistemas, la posición de la barra de estado y el botón de la cápsula son inciertas, por lo que se necesitan ciertos cálculos, para que se pueda determinar con calma para cualquier modelo.
- Utilice wx.getSystemInfo () para obtener el statusBarHeight , que determina la distancia más básica de la barra de navegación de los datos en la parte superior de la pantalla.
- Use wx.getMenuButtonBoundingClientRect () para obtener la información de la cápsula del subprograma (tenga en cuenta que hay varios problemas con esta API y el rendimiento es inconsistente en diferentes extremos. El manejo de esta falla de llamada a la API se describirá más adelante), como se muestra en En la figura siguiente, la siguiente información de coordenadas se encuentra en la esquina superior izquierda de la pantalla como origen.
3. Tome la siguiente figura como ejemplo. El cuadro rojo de arriba es statusBar y la altura es conocida; el cuadro rojo de abajo es el contenido del texto, y el del medio es navigationBarHeight ; y el amarillo es el botón de la cápsula nativa también está en la posición central vertical, la altura es Dado que la información de coordenadas del botón de la cápsula se conoce en función de la esquina superior izquierda, no es difícil dibujar navigationBarHeight = altura del cuadro azul × 2 + botón de la cápsula . (Altura del cuadro azul = botón de la cápsula.top- statusBarHeight )
4. La fórmula de cálculo final es: navigationBarHeight = (capsule button.top- statusBarHeight ) × 2 + capsule button.height. La distancia de la barra de navegación desde la parte superior de la pantalla es la altura de la barra de navegación .
5. Este método de cálculo es aplicable a varios modelos y Android ios.
6. Para los casos excepcionales en los que " wx.getMenuButtonBoundingClientRect () " obtiene un error o la obtención de datos es 0, solo se puede simular. Para Android, navigationBarHeight es generalmente de 48px, y para ios, generalmente es de 40px. La altura del botón de la cápsula de todos los modelos es El autor también obtuvo 32px a través de muchos artículos y autopruebas en Internet, y este error generalmente se puede ignorar. Por supuesto, lo más ideal es que WeChat pueda contener todos los modelos, ja, ja. Finalmente, me gustaría recordarles que solo la máquina real es el estándar, y hay más errores en las herramientas de desarrollo.
Código
- Obtenga la información local, generalmente escrita en el lanzamiento de la aplicación.
App.js
// App.js
...
onLaunch(){
const { statusBarHeight, platform } = wx.getSystemInfoSync()
const { top, height } = wx.getMenuButtonBoundingClientRect()
// 状态栏高度
wx.setStorageSync('statusBarHeight', statusBarHeight)
// 胶囊按钮高度 一般是32 如果获取不到就使用32
wx.setStorageSync('menuButtonHeight', height ? height : 32)
// 判断胶囊按钮信息是否成功获取
if (top && top !== 0 && height && height !== 0) {
const navigationBarHeight = (top - statusBarHeight) * 2 + height
// 导航栏高度
wx.setStorageSync('navigationBarHeight', navigationBarHeight)
} else {
wx.setStorageSync(
'navigationBarHeight',
platform === 'android' ? 48 : 40
)
}
}
...- El autor almacena esta información de altura en el trazo y luego crea un componente personalizado navigationBar, y estos datos se utilizarán en el componente.
navigationBar.js
// navigationBar.js
...
data: {
// 状态栏高度
statusBarHeight: wx.getStorageSync('statusBarHeight') + 'px',
// 导航栏高度
navigationBarHeight: wx.getStorageSync('navigationBarHeight') + 'px',
// 胶囊按钮高度
menuButtonHeight: wx.getStorageSync('menuButtonHeight') + 'px',
// 导航栏和状态栏高度
navigationBarAndStatusBarHeight:
wx.getStorageSync('statusBarHeight') +
wx.getStorageSync('navigationBarHeight') +
'px'
}
...- El diseño en navigationBar.wxml no entrará en detalles. En términos generales, la barra de navegación utiliza un posicionamiento fijo y el botón de retorno personalizado se coloca verticalmente en la fila, el título de navegación está centrado y la elipsis se muestra cuando el número de palabras es demasiado.
navigationBar.wxml
<!--navigationBar.wxml-->
<view class="navigation-container" style="{
{'height: ' + navigationBarAndStatusBarHeight}}">
<!--空白来占位状态栏-->
<view style="{
{'height: ' + statusBarHeight}}"></view>
<!--自定义导航栏-->
<view class="navigation-bar" style="{
{'height:' + navigationBarHeight}}">
<view class="navigation-buttons" style="{
{'height:' + menuButtonHeight}}">
<image class="nav-img" src='/images/back.svg'/>
...其余自定义button
</view>
<view class="navigation-title" style="{
{'line-height:' + navigationBarHeight}}">{
{title}}</view>
</view>
</view>
<!--空白占位fixed空出的位置-->
<view style="{
{'height: ' + navigationBarAndStatusBarHeight}}; background: #ffffff"></view>navigationBar.wxss
/* navigationBar.wxss */
.navigation-container {
position: fixed;
width: 100%;
z-index: 99;
top: 0;
left: 0;
background-color: #ffffff;
}
.navigation-bar {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
}
.navigation-buttons {
display: flex;
align-items: center;
margin-left: 10px;
border: 1px solid rgba(0, 0, 0, 0.05);
box-sizing: border-box;
border-radius: 15px;
background-color: transparent;
}
.nav-img{
height: 16px;
width: 16px;
}
.navigation-title {
position: absolute;
left: 104px;
right: 104px;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #000000;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}