105 lines
3.9 KiB
Markdown
105 lines
3.9 KiB
Markdown
## tm-nav-bar 导航栏组件
|
||
|
||
常用于H5页面的头部
|
||
|
||
是天马工场所有公共组件之一，[组件功能预览链接](http://dev.360tianma.com/public/doc/uniapp/index.html#/)，用手机浏览效果更佳
|
||
|
||
> 代码块： `tm-nav-bar`
|
||
> 关联组件：`uni-icons`
|
||
|
||
### 1.1 使用方式
|
||
|
||
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
|
||
|
||
直接点击`使用HbuilderX导入插件`就行
|
||
|
||
### 1.2 基本用法
|
||
|
||
> 在 template 中使用组件
|
||
|
||
```html
|
||
<!-- 基本用法 -->
|
||
<tm-nav-bar title="自定义标题" @clickLeft="clickLeft" />
|
||
|
||
<!-- 左右都显示文字 -->
|
||
<tm-nav-bar left-icon="arrowleft" left-text="返回" right-icon="weixin" right-text="分享" title="自定义标题" @clickLeft="back" @clickRight="clickRight" />
|
||
|
||
<!-- 设置颜色 -->
|
||
<tm-nav-bar left-icon="arrowleft" left-text="返回" leftColor="#ffffff" right-icon="weixin" right-text="分享" rightColor="#ffffff" title="自定义标题" titleColor="#ffffff" :backgroundType="0" backgroundColor="#007AFF" @clickLeft="clickLeft" @clickRight="clickRight" />
|
||
|
||
<!-- 设置背景图片 -->
|
||
<tm-nav-bar left-icon="arrowleft" left-text="返回" leftColor="#ffffff" right-icon="weixin" right-text="分享" rightColor="#ffffff" title="自定义标题" titleColor="#ffffff" :backgroundType="1" backgroundImgUrl="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1467185356,2616406287&fm=26&gp=0.jpg" @clickLeft="clickLeft" @clickRight="clickRight" />
|
||
```
|
||
|
||
|
||
|
||
```javascript
|
||
export default {
|
||
methods:{
|
||
clickRight() {
|
||
uni.showToast({
|
||
title: '点击右侧按钮'
|
||
})
|
||
},
|
||
clickLeft() {
|
||
uni.showToast({
|
||
title: '点击左侧按钮'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
```
|
||
|
||
|
||
### 1.3 参数说明
|
||
|
||
|属性名|类型|默认值|说明|
|
||
|:--|:--|:--|:--|
|
||
|height |Number |44 |单位：px|
|
||
|title |String |- |标题文字|
|
||
|fontSize |Number |14 |标题文字大小(作用于title、leftText、rightText)，单位：px|
|
||
|iconSize |Number |24 |左右两边字体大小，单位：px|
|
||
|leftText |String |- |左边文字|
|
||
|leftIcon |String |arrowleft |需在uni-icon中选择图标|
|
||
|leftColor |String |#333 |左边颜色，同css中颜色值一样|
|
||
|rightText |String |- |右边文字|
|
||
|rightIcon |String |- |需在uni-icon中选择图标|
|
||
|rightColor |String |#333 |右边颜色，同css中颜色值一样|
|
||
|titleColor |String |#333 |中间文字颜色，同css中颜色值一样|
|
||
|backgroundType |Number |0 |0: 背景颜色 1: 背景图片|
|
||
|backgroundColor |String |#ffffff |当backgroundType = 0时有效，填充背景颜色，透明背景时，可设置为'transparent'|
|
||
|backgroundImgUrl |String |- |当backgroundType = 1时有效，填充背景图片，可以是本地路径，也可以是网络路径|
|
||
|fixed |Boolean |false |是否固定在顶部|
|
||
|statusBar |Boolean |false |是否展示状态栏|
|
||
|
||
|
||
|事件名称 |说明 |返回值 |
|
||
|:-: |:-: |:-: |
|
||
|@clickLeft |左侧内容点击触发 | |
|
||
|@clickRight |右侧内容点击触发 | |
|
||
|
||
### 1.4 插槽说明
|
||
|
||
开发者使用 NavBar 时，支持向 NavBar 里插入不同内容，以达到自定义的目的。
|
||
|
||
|slot名|说明|
|
||
|:--|:--|
|
||
|left |向导航栏左侧插入 |
|
||
|right |向导航栏右侧侧插入 |
|
||
|default |向导航栏中间插入 |
|
||
|
||
```html
|
||
<tm-nav-bar :fixed="false" color="#333333" background-color="#FFFFFF" right-icon="scan" @clickLeft="clickLeft" @clickRight="clickRight">
|
||
<block slot="left">
|
||
<view class="city">
|
||
<view><text class="uni-nav-bar-text">成都</text></view>
|
||
<uni-icons type="arrowdown" color="#333333" size="22" />
|
||
</view>
|
||
</block>
|
||
<view class="input-view">
|
||
<uni-icons class="input-uni-icon" type="search" size="22" color="#666666" />
|
||
<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" @confirm="confirm">
|
||
</view>
|
||
</tm-nav-bar>
|
||
``` |