The front-end vue customizes the height of the navigation bar component and the return arrow to customize the tabbar icon. To download the complete code, please visit the uni-app plug-in market address: https://ext.dcloud.net.cn/plugin?id=12986
The renderings are as follows:
#
#### Instructions
```How to use
// page.json uses a vector icon to set the return arrow
,{
"path" : "pages/Home/Home",
"style" :
{
"navigationBarTitleText": "Home",
"enablePullDownRefresh": false,
"app-plus": {
"titleNView": {
"buttons": [{
"float": "left",
"fontSize": "22px",
"fontSrc": "/static/iconfont.ttf", // font file
"text": "" // The font icon starts with \u, plus four digits after the font icon unicode
}
]
}
}
}
}
// custom navigation bar height
agentUserAgent() {
var agent = navigator.userAgent;
if (/iphone|ipad|ipod/i.test(agent)) {
if (document.querySelector('.titleIos'))
document.querySelector('.titleIos').style.display = 'block';
document.querySelector('.uni-page-head').style.paddingTop = '44px';
document.querySelector('.uni-page-head').style.height = '88px';
}
},
```
#### HTML code section
```html
<template>
<view>
<view class="content">
<!-- Adapt to the height of the iOS navigation bar -->
<view class="titleIos"></view>
front page
<button style="margin-top: 20px;" @click="goBackIndex">Back to index page</button>
</view>
</view>
</template>
```
#### JS code (introduce component to fill data)
```javascript
<script>
export default {
data() {
return {
}
},
onReady() {
// custom navigation bar height
this.agentUserAgent();
},
methods: {
// custom navigation bar height
agentUserAgent() {
var agent = navigator.userAgent;
if (/iphone|ipad|ipod/i.test(agent)) {
if (document.querySelector('.titleIos'))
document.querySelector('.titleIos').style.display = 'block';
document.querySelector('.uni-page-head').style.paddingTop = '44px';
document.querySelector('.uni-page-head').style.height = '88px';
}
},
// return menu click
onNavigationBarButtonTap(e) {
if (e.index == 0) {
uni.redirectTo({
url: '/pages/index/index'
})
}
},
goBackIndex() {
uni.redirectTo({
url: '/pages/index/index'
})
}
}
}
</script>
```
#### CSS
```CSS
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background: yellowgreen;
font-size: 26px;
}
</style>
```