前端vue自定義導(dǎo)航欄組件高度及返回箭頭 自定義tabbar圖標(biāo),?下載完整代碼請(qǐng)?jiān)L問uni-app插件市場(chǎng)地址:https://ext.dcloud.net.cn/plugin?id=12986
效果圖如下:
#
#### 使用方法
```使用方法
// page.json 采用矢量圖標(biāo)設(shè)置返回箭頭
? ? ,{
? ? ? ? ? ? "path" : "pages/Home/Home",
? ? ? ? ? ? "style" :? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? {
? ? ? ? ? ? ? ? "navigationBarTitleText": "首頁",
? ? ? ? ? ? ? ? "enablePullDownRefresh": false,
"app-plus": {
? ? ? ? ? ? ? ? ? ? "titleNView": {
? ? ? ? ? ? ? ? ? ? ? ? "buttons": [{
? ? ? ? ? ? ? ? ? ? ? ? ? ? "float": "left",
? ? ? ? ? ? ? ? ? ? ? ? ? ? "fontSize": "22px",
? ? ? ? ? ? ? ? ? ? ? ? ? ? "fontSrc": "/static/iconfont.ttf", // 字體文件
? ? ? ? ? ? ? ? ? ? ? ? ? ? "text": "" // 字體圖標(biāo)\u 開頭，加上字體圖標(biāo)unicode后面四位
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
}
? ? ? ? ? }
// 自定義導(dǎo)航欄高度
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代碼部分
```html
<template>
<view>
<view class="content">
<!-- 適配iOS導(dǎo)航欄高度 -->
<view class="titleIos"></view>
首頁
<button style="margin-top: 20px;" @click="goBackIndex">返回index頁面</button>
</view>
</view>
</template>
```
#### JS代碼 （引入組件 填充數(shù)據(jù)）
```javascript
<script>
export default {
data() {
return {
}
},
onReady() {
// 自定義導(dǎo)航欄高度
this.agentUserAgent();
},
methods: {
// 自定義導(dǎo)航欄高度
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';
}
},
// 返回菜單點(diǎn)擊
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>
```
