一开始以为uni-app想自定义导航是需要像原生小程序那样子实现的,但看了一下文档发现并不是,只需要在pages.json里面修改app-plus
详情:app-plus
需要注意的是,经过测试,目前好像只有app端、H5有用。小程序没作用
小程序想自定义头部的话请跳过这段。往下拉
app端、H5实现自定义头部
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "#00c170",
"app-plus": {
"bounce": "none",
"titleNView": {
"buttons": [
{
"text": "左边",
"fontSize":"16",
"float": "right",
"color":"#fff"
},
{
"text": "右边",
"fontSize":"16",
"float": "left",
"color":"#fff"
}
]
}
}
}
}
]
}
小程序如何自定义头部
两种做法
1和原生小程序一样实现
2在uni-app市场里面找到一款叫NavBar 导航栏的组件
以下以NavBar 导航栏组件解决方案
先去掉小程序的默认标题
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
],
"globalStyle": {
"navigationStyle": "custom"
}
}
在页面里面
<template>
<view class="content">
<uni-nav-bar left-icon="back" left-text="右边的文字" title="首页" background-color="#00c170" color="#fff"></uni-nav-bar>
</view>
</template>
<script>
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
export default {
components:{
uniNavBar
}
}
</script>
```![在这里插入图片描述](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODc0OTkzNS0xZjA1NmQwYzlhOGM1MmQ5LnBuZw?x-oss-process=image/format,png)