Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
uni-app
提交
2e7eacc7
U
uni-app
项目概览
DCloud
/
uni-app
4 个月 前同步成功
通知
730
Star
38707
Fork
3642
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
7
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
7
Issue
7
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
2e7eacc7
编写于
3月 24, 2020
作者:
d-u-a
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs: update navigation-bar
上级
d9b46118
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
20 addition
and
1 deletion
+20
-1
docs/collocation/pages.md
docs/collocation/pages.md
+1
-1
docs/component/navigation-bar.md
docs/component/navigation-bar.md
+19
-0
未找到文件。
docs/collocation/pages.md
浏览文件 @
2e7eacc7
...
...
@@ -307,7 +307,6 @@
|titleIcon|String||标题图标,图标路径如"./img/t.png",仅支持本地文件路径, 相对路径,相对于当前页面的host位置,固定宽高为逻辑像素值"34px"。 要求图片的宽高相同。 注意:设置标题图标后标题将居左显示。|2.6.6|
|titleIconRadius|String|无圆角|标题图标圆角,取值格式为"XXpx",其中XX为像素值(逻辑像素),如"10px"表示10像素半径圆角。|2.6.6|
#### SplitLineStyles@app-titleNView-splitLineStyles
|属性|类型|默认值|描述|版本兼容性|
|:-|:-|:-|:-|:-|
...
...
@@ -323,6 +322,7 @@
-
`titleNView`
的
`type`
值为
`transparent`
时,App-nvue 2.4.4+ 支持
-
在
`titleNView`
配置
`buttons`
后,监听按钮的点击事件,vue 页面及 nvue 的weex编译模式参考:
[
uni.onNavigationBarButtonTap
](
/use-weex?id=onnavigationbarbuttontap
)
-
在
`titleNView`
配置
`searchInput`
后,相关的事件监听参考:
[
onNavigationBarSearchInputChanged 等
](
/frame?id=页面生命周期
)
-
可通过
`[<navigation-bar>(/component/navigation-bar)]`
配置
-
App下原生导航栏的按钮如果使用字体图标,注意检查字体库的名字(font-family)是否使用了默认的 iconfont,这个名字是保留字,不能作为外部引入的字体库的名字,需要调整为自定义的名称,否则无法显示。
-
想了解各种导航栏的开发方法,请详读
[
导航栏开发指南
](
https://ask.dcloud.net.cn/article/34921
)
...
...
docs/component/navigation-bar.md
浏览文件 @
2e7eacc7
...
...
@@ -15,12 +15,24 @@
|属性|类型|默认值|必填|说明|最低版本
|:-|:-|:-|:-|:-|:-|
|title|string||否|导航条标题|微信基础库 2.9.0|
|title-icon|string||||App 2.6.7+|
|titleIcon-radius|string||||App 2.6.7+|
|subtitle-text|string||||App 2.6.7+|
|subtitle-size|string||||App 2.6.7+|
|subtitle-color|string||||App 2.6.7+|
|subtitle-overflow|string||||App 2.6.7+|
|title-align|string||||App 2.6.7+|
|background-image|string||||App 2.6.7+|
|background-repeat|string||||App 2.6.7+|
|blur-effect|string||||App 2.6.7+|
|loading|string|false|否|是否在导航条显示 loading 加载提示|微信基础库 2.9.0|
|front-color|string||否|导航条前景颜色值,包括按钮、标题、状态栏的颜色,仅支持 #ffffff 和 #000000|微信基础库 2.9.0|
|background-color|string||否|导航条背景颜色值,有效值为十六进制颜色|微信基础库 2.9.0|
|color-animation-duration|number|0|否|改变导航栏颜色时的动画时长,默认为 0 (即没有动画效果)|微信基础库 2.9.0|
|color-animation-timing-func|string|"linear"|否|改变导航栏颜色时的动画方式,支持 linear 、 easeIn 、 easeOut 和 easeInOut|微信基础库 2.9.0|
属性说明
[
/collocation/pages?id=app-titlenview
](
/collocation/pages?id=app-titlenview
)
**注意**
-
`navigation-bar`
目前支持的配置仅为上表所列,并不支持 page.json 中关于导航栏的所有配置
-
`navigation-bar`
与 pages.json 的设置相冲突时,会覆盖 page.json 的配置
...
...
@@ -33,6 +45,10 @@
<page-meta>
<navigation-bar
:title="nbTitle"
:titleIcon="titleIcon"
:title-icon-radius="titleIconRadius"
:subtitleText="subtitleText"
:subtitle-color="nbFrontColor"
:loading="nbLoading"
:front-color="nbFrontColor"
:background-color="nbBackgroundColor"
...
...
@@ -49,6 +65,9 @@
data() {
return {
nbTitle: '标题',
titleIcon: '/static/logo.png',
titleIconRadius: '20px',
subtitleText: 'subtitleText',
nbLoading: false,
nbFrontColor: '#000000',
nbBackgroundColor: '#ffffff'
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录