Wie kann ich die Navigationsleiste anpassen?
Entfernen Sie die native Navigationsleiste.
- Page.json navigationBar muss die entfernten Seiten von navigationBarTitleText anpassen .
- Fügen Sie "navigationStyle": "custom" hinzu , sodass die native Navigationsleiste verschwunden ist und selbst die Schaltfläche "Zurück" nicht angepasst zu sein scheint.
- Darüber hinaus hat WeChat bereits 2016 begonnen, sich an die immersive Statusleiste anzupassen. Derzeit sind fast alle Modelle von WeChat immersive Statusleisten, was bedeutet, dass der gesamte Bildschirm programmierbar geworden ist, während die native Navigationsleiste entfernt wurde Bereich .
- Dokument: https://developers.weixin.qq.com/miniprogram/dev/extended/weui/navigation.html
Berechnen Sie navigationBarHeight.
- Die native Kapselschaltfläche ist sicherlich vorhanden. Im nächsten Schritt müssen Sie die Höhe und Position der benutzerdefinierten Navigationsleiste ermitteln.
- Für verschiedene Modelle, für verschiedene Systeme ist die Position der Statusleiste und der Kapselschaltfläche ungewiss, sodass bestimmte Berechnungen erforderlich sind, damit sie für jedes Modell ruhig bestimmt werden können.
- Verwenden Sie wx.getSystemInfo (), um die statusBarHeight abzurufen , die den grundlegendsten Abstand der Navigationsleiste von den Daten am oberen Bildschirmrand bestimmt.
- Verwenden Sie wx.getMenuButtonBoundingClientRect (), um die Kapselinformationen des Applets abzurufen ( beachten Sie, dass bei dieser API verschiedene Probleme auftreten und die Leistung an verschiedenen Enden inkonsistent ist. Die Behandlung dieses API-Aufruffehlers wird später beschrieben), wie in gezeigt In der folgenden Abbildung befinden sich die folgenden Koordinateninformationen in der oberen linken Ecke des Bildschirms als Ursprung.
3. Nehmen Sie die folgende Abbildung als Beispiel: Das rote Feld oben ist statusBar und die Höhe ist bekannt, das rote Feld unten ist der Textinhalt und das mittlere Feld ist die NavigationsleisteHeight und das gelbe ist die native Kapselschaltfläche in der vertikalen Mittelposition wird auch ist die Höhe Da die Knopfinformation der Kapsel - Koordinate an der oberen linken Ecke basiert bekannt ist , ist es nicht schwer zu zeichnen navigationBarHeight = blau Boxhöhe × 2 + Kapsel button.height. (Blue Box Höhe = Kapsel button.top- statusBarHeight )
4. Die letzte Berechnungsformel ist: navigationBarHeight = (Kapsel button.top- statusBarHeight ) × 2 + Kapsel button.height. Die Entfernung der Navigationsleiste vom oberen Bildschirmrand ist die Navigationsleiste .
5. Diese Berechnungsmethode ist auf verschiedene Modelle und Android-iOS anwendbar.
6. In den seltenen Fällen, in denen " wx.getMenuButtonBoundingClientRect () " einen Fehler erhält oder die Get-Daten 0 sind, kann dies nur simuliert werden. Für Android beträgt die NavigationBarHeight im Allgemeinen 48 Pixel und für iOS im Allgemeinen 40 Pixel. Die Höhe beträgt von der Kapsel - Taste von allen Modellen ist der Autor viele Artikel und Selbsttests im Internet, und diese Fehler im allgemeinen ignoriert werden können auch erhalten 32px durch. Das Idealste ist natürlich, dass WeChat alle Modelle aufnehmen kann, ha ha. Abschließend möchte ich Sie daran erinnern, dass nur die reale Maschine der Standard ist und die Entwicklertools weitere Fehler aufweisen.
Code
- Holen Sie sich die lokalen Informationen, die im Allgemeinen im onLaunch der App geschrieben sind.
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
)
}
}
...- Der Autor speichert diese Höheninformationen in der Strage und erstellt dann eine benutzerdefinierte Navigationsleiste. Diese Daten werden in der Komponente verwendet.
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'
}
...- Das Layout in navigationBar.wxml geht nicht auf Details ein. Im Allgemeinen verwendet die Navigationsleiste eine feste Positionierung, und die benutzerdefinierte Zurück-Schaltfläche ist vertikal in der Zeile positioniert, der Navigationstitel ist zentriert und die Auslassungspunkte werden angezeigt, wenn die Anzahl der Wörter angegeben ist ist zu viel.
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;
}