一、默认导航栏
uni-app默认会提供一个导航栏，即 小程序的导航栏 ，我们不需要进行任何的配置就会显示， 默认导航栏的配置同微信小程序 ，只不过微信小程序的组件是分为.wxml、.wxss、.js、.json四个文件组成，而 uni-app的组件则只有一个.vue文件 (其中包含了html、css、js)，其中并未包含.json的相关内容，那么.json配置写在哪里呢？.json文件主要是 对页面的 窗口表现及页面相关功能进行配置，所以unip在pages.json文件中注册页面的时候，给每个page页面提供了一个style属性，用于对当前页面的窗口表现( 窗口 样式、 导航栏 样式)及功能( 页面下拉刷新 、 页面能否滚动等)，如:
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index","style": { // 对窗口及其页面表现进行配置
"navigationBarTitleText": "导航标题",// 设置默认导航栏标题文字内容
"navigationBarTextStyle": "white",96);">// 设置默认导航栏标题文字颜色及状态栏上文字颜色，仅支持black和white
"navigationBarBackgroundColor": "#4CD964",96);">// 设置默认导航栏背景颜色及状态栏背景颜色，仅支持十六进制颜色值
"navigationStyle": "default",96);">// 支持defaul和custom两种，设置custom(自定义)后，默认导航栏将消失，微信小程序上只保持右上角胶囊按钮
"backgroundColor":"#ADFF2F",96);">// 设置窗口背景颜色，开启下拉刷新之后，下拉后可见该背景颜色(黄色)，仅小程序端生效
"enablePullDownRefresh": true,96);">// 是否开启页面下拉刷新功能
// 上拉刷新不需要开启，页面提供了一个触底事件onReachBottom，只要页面存在滚动条，滚动条触底后就可以触发触底事件，从而进行下拉刷新
"onReachBottomdistance": 0,96);">// 当滚动条距离底部的距离为指定值的时候则判定为触底
"disableScroll": false,96);">// 页面能否滚动，如果为true则禁用页面滚动功能，及时页面设置的高度超过了屏幕高度也不会发生滚动，仅小程序端生效
"usingComponents": { // 配置是否使用小程序提供的自定义组件，这里的小程序组件不是.vue组件，而是小程序提供的原生组件，App端也支持
"custom": "/wxcomponents/custom/index"
},96);">// "backgroundTextStyle":"dark",96);">// 设置下拉 loading 的样式，仅支持dark和light,无明显用处
}
}
]
}
二、原生导航栏
@H_502_94@uni-app运行在app端的时候，还提供了原生导航栏，其在注册页面的时候，style还提供了一个 app-plus 属性用于 配置app端 页面窗口、导航栏样式的配置，导航栏的配置通过titleNView属性，如: 开头
"fontSize":"22px",0);">"color":"#FF9619",0);">"colorpressed":"#BBBBBB",0);">"select": false,96);">// 是否显示右侧向下箭头图标常用于城市选择
"float":"left" // 按钮放在导航栏左侧
},{
"favorite",0);">"\ue653",0);">"#000000",0);">"right" // 按钮放在导航栏右侧
}
],0);">"searchInput": { // 是否在原生导航栏上添加搜索框，一旦添加搜索框，那么导航栏标题内容将无法显示，因为搜索框是放在标题的位置，对标题进行了替换
"align":"center",0);">"#F7F7F7",0);">"borderRadius":"4px",0);">"placeholder":"搜索",0);">"disabled": true
}
}
}
}
}
]
}
三、自定义导航栏
@H_502_94@要想自定义导航栏，我们必须先让默认导航栏或者原生导航栏隐藏，在小程序端可以通过 "navigationStyle":"custom" 隐藏，app端则可以通过 "titleNView": false 进行隐藏，如:<view class="pull-down iconfont icon-liulan" :style="{transform: 'rotate(' + detal+ 'deg)'}"></view>
<scroll-view scroll-y "scroll-Box" @scrolltoupper="pullDown" @scroll="scroll">
</scroll-view>
export default {
methods: {
pullDown(e) {
// console.log(e);
},scroll(e) { // 根据下拉的距离改变detal的值从而改变下拉刷新图标的选择角度
this.detal = e.detail.scrollTop + 100;
}
}
}
四、vue与nvue
@H_502_94@nvue即 native vue 。uni-app App端内置 weex 渲染引擎，提供了原生渲染能力。 uni-app默认是处于uni-app的渲染模式 ，即小程序渲染模式，如果要启用纯原生渲染模式，即weex渲染模式，那么需要在 manifest.json 源码视图的 "app-plus" 下配置 "renderer":"native" ，开启原生渲染模式后， pages.json注册的vue页面将被忽略 ，启动纯原生渲染，可以减少App端的包体积、加快App启动速度。因为webview渲染模式的相关模块将被移除了。// manifest.json
{
// ...
/* App平台特有配置 */
"app-plus": {
"renderer": "native",//App端纯原生渲染模式
}
}
@H_502_94@在未开启weex原生渲染模式的情况下，即uni-app模式下也是可以直接渲染.nvue文件的， 不管是vue页面还是nvue页面，都需要在pages.json中注册 ，并且如果一个页面下出现了两个同名的vue和nvue文件，那么在 App端 ， 会优先使用nvue页面 ，同名的vue文件将不会被编译到App端。而在 非App端 ， 会优先使用vue页面 。.nve文件的写法同.vue文件一样，只不过，.nvue文件中可以还使用一些weex提供的特有组件，比如<barcode>、<list>、<cell>、<refresh>等。
五、subNvue
@H_502_94@subNvue ，是 vue 页面的原生子窗体，其会 把weex渲染的原生界面当做 vue 页面的子窗体覆盖在页面上 ，主要解决 运行在App端时 ， 视图无法覆盖在<video>、<map>等组件上 的问题( 非App端可以通过z-index或者cover-view解决 )，subNvue的使用方式非常简单，只需要 新建一个.nvue文件 ，建议放在母页面目录中，但是 subNvue页面不需要注册到pages.json中 ，而是 在母页的"style"--> "app-plus" --> "subNVues"进行配置 ，因为subNvue主要解决App端层级覆盖问题，所以需要在"app-plus"下配置，需要注意的是 subNVues是一个数组 ，每个元素为一个原生子窗体，因为一个母页中可以包含多个原生子窗体，每个原生子窗体通过配置中的id进行区分。配置好subNvues后，对应的原生子窗体默认就会显示。
六、优化自定义导航栏下拉刷新功能
@H_502_94@前面说过，使用自定义导航栏需要隐藏掉默认导航栏和原生导航栏，但是会存在一个问题，就是页面下拉刷新会跟着上移到了最顶部，导致页面下拉刷新位置不正确，之前的方法是使用<scroll-view>方法进行模拟， 但是官方并不推荐该方法 ，我们可以通过原生子窗口实现，其实现方法非常简单，就是用原生子窗口占据原生导航栏的位置，其中关键的一步就是，在配置原生子窗体的时候， 需要将其type设置为navigationBar类型 ，该原生子窗体就会站住原生导航栏的位置，并且下拉刷新图标不会向上移，如:
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path" : "pages/nav/nav","style" : {
"navigationBarTextStyle":"navigationBarBackgroundColor":"#007AFF","enablePullDownRefresh": true,"app-plus": {
"titleNView": false,"subNVues": [
{
"id":"nav","path":"pages/nav/subNvue/nav","type":"navigationBar" // 设置为navigationBar类型才能让原生子窗体站住原生导航栏的位置
}
]
}
}
},]
}
pages/nav/subNvue/nav.nvue
<template>
<div class="nav">
<"status-bar"></div>
<"nav-title">
<div>我是导航栏</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.nav { /*.nvue页面中的所有元素都是flex布局,不需要进行显示设定*/
flex: 1; /*占满整个导航栏高度,当该原生子窗体页面被设置为navigationBar类型后,会自动给予该页面一个导航高度,占满即可*/
background-color: #007AFF;
}
.status-bar { /*状态栏占位区,下面导航标题栏已经设置了44px高度，让状态栏占满剩余高度*/
1;
}
.nav-title {
0;
height: 44px; /*导航栏固定高度为44px*/
#007AFF;
justify-content: center;
align-items: center;/*导航栏标题区垂直居中显示*/
}
</style>
七、实现抽屉效果
@H_502_94@所谓抽屉效果就是，就是页面上触发某种事件后，页面上方有一个页面从屏幕的一侧开始滑出覆盖到原来页面的上方，然后点击空白处，该页面又可以收回去的效果。要实现这种效果，我们也是需要利用原生子窗体，将抽屉页面做成一个原生子窗体覆盖在页面上方，其中关键的一步，就是 需要将其type设置为popup类型 ， 设置为popup类型之后 ， 该页面默认不会出现在母页面上 ，需要通过调用api才能让该抽屉页面显示出来。如:
pages/nav/subNvue/nav.nvue 母页通过api控制原生子窗体的显示和隐藏
).show("slide-in-left",200); // 从屏幕左侧向右边滑入，耗时200ms
}
}
}
</script>
@H_502_94@同样的方式也可以实现页面中间显示弹出框效果，只需要改变原生子窗体的位置即可，即将其定位到正中间，如: