uniApp自定义导航的布局实现

pages.json 页面路由 | uni-app官网

1. 官网的全局文件有一个pages.json页面路由，找到 globalStyle 的 navigationStyle

2. 打开 pages.json 文件在 “pages”数组的style中添加  "navigationStyle":"custom"（默认头部已消失）

"pages": [   //pages数组中第一项表示应用启动页
    {
        "path":"pages/index/index",
        "style": {
            "navigationStyle":"custom",  // 自定义导航的开启，将取消默认导航
            "navigationBarTitleText":"硅谷团购项目"
        }
    }
],

3. 在全局页面 App.vue 设置样式

<style>
    page{
        height:100%
    }
</style>

4. 可以利用uView组件库设置一个新的导航栏

uView - 多平台快速开发的UI框架 - uni-app UI框架

<!--
    自定义导航设置
    知识点：渐变（线性、径向）
-->
<u-navbar 
    // back-text="返回"  // 返回上一页
    :is-back="false"   // 去除返回上一页
    title="剑未配妥，出门已是江湖"  //头部标题
    :background="{   // 导航栏背景设置
        'background-image':'linear-gradient(to right,rgb(255,180,61),rgb(255,101,0))'
    }"   
    :border-bottom="false"  // 导航栏下边框去除
></u-navbar>