前端vue自定义导航栏组件高度及返回箭头 自定义tabbar图标, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12986
效果图如下:
使用方法
// page.json 采用矢量图标设置返回箭头
,{
"path" : "pages/Home/Home",
"style" :
{
"navigationBarTitleText": "首页",
"enablePullDownRefresh": false,
"app-plus": {
"titleNView": {
"buttons": [{
"float": "left",
"fontSize": "22px",
"fontSrc": "/static/iconfont.ttf", // 字体文件
"text": "" // 字体图标\u 开头，加上字体图标unicode后面四位
}
]
}
}
}
}
// 自定义导航栏高度
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代码部分
<template>
<view>
<view class="content">
<!-- 适配iOS导航栏高度 -->
<view class="titleIos"></view>
首页
<button style="margin-top: 20px;" @click="goBackIndex">返回index页面</button>
</view>
</view>
</template>
JS代码 （引入组件 填充数据）
<script>
export default {
data() {
return {
}
},
onReady() {
// 自定义导航栏高度
this.agentUserAgent();
},
methods: {
// 自定义导航栏高度
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';
}
},
// 返回菜单点击
onNavigationBarButtonTap(e) {
if (e.index == 0) {
uni.redirectTo({
url: '/pages/index/index'
})
}
},
goBackIndex() {
uni.redirectTo({
url: '/pages/index/index'
})
}
}
}
</script>
CSS
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background: yellowgreen;
font-size: 26px;
}
</style>