我的书签
添加书签
移除书签pages
uni-app 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下：
Tips：
- 应用中新增/减少页面，都需要对 pages 数组进行修改
- 不需要写后缀，框架会自动寻找路径下的页面资源代码示例：
开发目录为：
则需要在 pages.json 中填写┌─pages │ ├─index│ │ └─index.vue │ └─login│ └─login.vue ├─static ├─main.js ├─App.vue ├─manifest.json └─pages.json
{ "pages": [ { "path": "pages/index/index", "style": { ... } }, { "path": "pages/login/login", "style": { ... } } ]}
style
用于设置每个页面的状态栏、导航条、标题、窗口背景色等。 globalStyle 中相同的配置项 代码示例：{ "pages": [{ "path": "pages/index/index", "style": { "navigationBarTitleText": "首页",//设置页面标题文字 "enablePullDownRefresh":true//开启下拉刷新 } }, ... ]}
自定义导航栏使用注意
当navigationStyle设为custom或titleNView设为false时，原生导航栏不显示，此时要注意几个问题： - —status-bar-height，如果需要把状态栏的位置从前景部分让出来，可写一个占位div，高度设为css变量。
<template> <view> <view class="status_bar"> <!-- 这里是状态栏 --> </view> <view> 状态栏下的文字 </view> </view></template> <style> .status_bar { height: var(--status-bar-height); width: 100%; }</style>
- 自定义导航栏NavBar。这个前端导航栏自动处理了状态栏高度占位问题。
- mescroll插件，但这样很容易产生性能问题。目前小程序平台自身没有提供更好的方案
- circle样式，可以指定offset偏移量（pages.json的app-plus下配置），自定义下拉圈出现的位置。在hello uni-app的扩展组件中有示例。
- 原生组件，滚动时会覆盖住导航栏
- titleNView或subNVue，体验更好
- titleNView
- subNVue
- plus.navigator.setStatusBarStyle设置。注意部分低端Android手机（4.4）自身不支持设置状态栏前景色。鉴于以上问题，在原生导航能解决业务需求的情况下，尽量使用原生导航。甚至有时需要牺牲一些不是很重要的需求。在App和H5下，uni-app提供了灵活的处理方案：titleNView、subNVue、或整页使用nvue。但在小程序下，因为其自身的限制，没有太好的方案。有必要的话，也可以用条件编译分端处理。
app-plus
WebviewStyles。 Tips .nvue页面仅支持titleNView配置，其它配置项暂不支持导航栏
TipstitleNView:false来禁用原生导航栏。一旦禁用原生导航，请注意阅读自定义导航注意事项。titleNView不能设置autoBackButton、homeButton等属性titleNView的type值为transparent时，导航栏为透明渐变导航栏titleNView配置buttons后，监听按钮的点击事件，vue 页面参考：onNavigationBarButtonTap、nvue 页面参考：uni.onNavigationBarButtonTaptitleNView配置searchInput后，相关的事件监听参考：onNavigationBarSearchInputChanged 等- 导航栏开发指南
自定义按钮
按钮样式
使用 type 值设置按钮的样式时，会忽略 fontSrc 和 text 属性。搜索框配置
searchInput可以在titleNView的原生导航栏上放置搜索框。其宽度根据周围元素自适应。 searchInput Tips 页面生命周期。 - uni-app动态修改App端导航栏常见titleNView配置代码示例
Tips{ "pages": [{ "path": "pages/index/index", //首页 "style": { "app-plus": { "titleNView": false //禁用原生导航栏 } } }, { "path": "pages/log/log", //日志页面 "style": { "app-plus": { "bounce": "none", //关闭窗口回弹效果 "titleNView": { "buttons": [ //原生标题栏按钮配置, { "text": "分享" //原生标题栏增加分享按钮，点击事件可通过页面的 onNavigationBarButtonTap 函数进行监听 } ] } } } }, { "path": "pages/detail/detail", //详情页面 "style": { "navigationBarTitleText": "详情", "app-plus": { "titleNView": { "type": "transparent"//透明渐变导航栏 } } } }, { "path": "pages/search/search", //搜索页面 "style": { "app-plus": { "titleNView": { "type": "transparent",//透明渐变导航栏 "searchInput": { "backgroundColor": "#fff", "borderRadius": "6px", //输入框圆角 "placeholder": "请输入搜索内容", "disabled": true //disable时点击输入框不置焦，可以跳到新页面搜索 } } } } } ... ]}
- 详见
- 文档。注意disable状态无法设置文字、placehold暂不支持动态设置
-
原生子窗体
subNVues是 vue 页面的原生子窗体。用于解决 vue 页面中的层级覆盖和原生界面灵活自定义用的。 subNVues 开发指南 Tips subNVues的id是全局唯一的，不能重复- uni.getSubNVueById(‘id’) 获取
subNVues的实例 subNVues的path属性只能是nvue文件路径原生子窗体样式
代码示例{ "pages": [{ "path": "pages/index/index", //首页 "style": { "app-plus": { "titleNView": false , //禁用原生导航栏 "subNVues":[{//侧滑菜单 "id": "drawer", //subNVue 的 id，可通过 uni.getSubNVueById('drawer') 获取 "path": "pages/index/drawer.nvue", // nvue 路径 "style": { //webview style 子集，文档可暂时开放出来位置，大小相关配置 "position": "popup", //除 popup 外，其他值域参考 5+ webview position 文档 "width": "50%" } }, {//弹出层 "id": "popup", "path": "pages/index/popup", "style": { "position": "popup", "margin":"auto", "width": "150px", "height": "150px" } }, {//自定义头 "id": "nav", "path": "pages/index/nav", "style": { "position": "dock", "height": "44px" } }] } } }]}
下拉刷新
page->app-plus->pullToRefresh。 下拉刷新使用注意enablePullDownRefresh与pullToRefresh->support同时设置时，后者优先级较高。enablePullDownRefresh属性为 true。enablePullDownRefresh属性，而是配置pullToRefresh->support为 true。- 代码示例
{ "pages": [ { "path": "pages/index/index", //首页 "style": { "app-plus": { "pullToRefresh": { "support": true, "color": "#ff3333", "style": "default", "contentdown": { "caption": "下拉可刷新自定义文本" }, "contentover": { "caption": "释放可刷新自定义文本" }, "contentrefresh": { "caption": "正在刷新自定义文本" } } } } } ]}
h5
配置编译到 H5 平台时的特定样式导航栏
自定义按钮
按钮样式
使用 type 值设置按钮的样式时，会忽略 fontSrc 和 text 属性。下拉刷新
h5 平台下拉刷新动画，只有 circle 类型。搜索框样式
注意事项： h5节点没有配置，默认会使用app-plus下的配置。h5节点，则会覆盖app-plus下的配置。navigationBarShadow
