Como personalizar a NavigationBar?
Remova a barra de navegação nativa.
- Page.json navigationBar precisará personalizar as páginas de navigationBarTitleText removidas.
- Adicione "navigationStyle": "custom" , para que a barra de navegação nativa desapareça e até mesmo o botão de voltar não pareça ser personalizado.
- Além disso, já em 2016, o WeChat começou a se adaptar à barra de status imersiva. Atualmente, quase todos os modelos do WeChat são barras de status imersivas, o que significa que, embora a barra de navegação nativa seja removida, toda a tela se tornou um programa programável área .
- Documento: https://developers.weixin.qq.com/miniprogram/dev/extended/weui/navigation.html
Calcule navigationBarHeight.
- O botão de cápsula nativo certamente existe, portanto, a próxima etapa requer que você localize a altura e a posição da barra de navegação personalizada.
- Para diferentes modelos, para diferentes sistemas, a posição da barra de status e do botão cápsula são incertos, portanto, alguns cálculos são necessários, para que possa ser determinado com calma para qualquer modelo.
- Use wx.getSystemInfo () para obter o statusBarHeight , que determina a distância mais básica da barra de navegação dos dados na parte superior da tela.
- Use wx.getMenuButtonBoundingClientRect () para obter as informações da cápsula do miniaplicativo (observe que há vários problemas com esta API e o desempenho é inconsistente em diferentes extremidades. O tratamento dessa falha de chamada da API será descrito mais tarde), conforme mostrado em Na figura abaixo, as seguintes informações de coordenadas estão no canto superior esquerdo da tela como a origem.
3. Veja a figura a seguir como exemplo. A caixa vermelha acima é statusBar e a altura é conhecida; a caixa vermelha abaixo é o conteúdo do texto e a do meio é a navigationBarHeight ; e a amarela é o botão nativo da cápsula está também na posição central vertical, a altura é Desde as informações de coordenadas do botão cápsula é conhecida baseada no canto superior esquerdo, não é difícil tirar navigationBarHeight = altura da caixa azul × 2 + cápsula button.height. (Altura da caixa azul = cápsula button.top- statusBarHeight )
4. A fórmula de cálculo final é: navigationBarHeight = (capsule button.top- statusBarHeight ) × 2 + capsule button.height. NavigationBar distância da parte superior da tela é o navigationBarHeight .
5. Este método de cálculo é aplicável a vários modelos e iOS Android.
6. Para os raros casos em que " wx.getMenuButtonBoundingClientRect () " obtém um erro ou os dados de obtenção são 0, ele só pode ser simulado. Para android, o navigationBarHeight é geralmente 48 px, e para ios, geralmente é de 40 px. A altura do botão cápsula de todos os modelos é O autor também obteve 32px por meio de muitos artigos e autotestes na Internet, e esse erro geralmente pode ser ignorado. Claro, o ideal é que o WeChat possa conter todos os modelos, ha ha. Por fim, gostaria de lembrar que apenas a máquina real é o padrão, e existem mais bugs nas ferramentas de desenvolvedor.
Código
- Obtenha as informações locais, geralmente escritas no onLaunch do aplicativo.
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
)
}
}
...- O autor armazena essas informações de altura no stroage e, em seguida, cria um componente personalizado de navigationBar, e esses dados serão usados no 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'
}
...- O layout em navigationBar.wxml não entrará em detalhes. De modo geral, a barra de navegação usa posicionamento fixo e o botão de retorno personalizado é posicionado verticalmente na linha, o título de navegação é centralizado e as reticências são exibidas quando o número de palavras é demais.
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;
}