提交 2e7eacc7 编写于 作者: d-u-a's avatar d-u-a

docs: update navigation-bar

上级 d9b46118
......@@ -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)
......
......@@ -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.
先完成此消息的编辑!
想要评论请 注册