# hx-navbar 适用于 uni-app 项目的头部导航组件
导航栏组件，主要用于头部导航，组件名：hx-navbar
本组件目前兼容微信小程序、H5、5+APP。
### 本组件支持模式：
1. 普通固定顶部导航
2. 透明导航
3. 透明固定顶部导航
4. 不固定普通导航
5. 背景颜色线性渐变
6. 滑动显示背景
7. 左、中、右3个插槽；可关闭左右插槽使中间插槽铺满导航，实现高度自定义的导航需求
### 使用前提
需要先安装·uniapp·官方的```uni-icons``` 图标组件，```uni-icons```官方组件下载地址：[https://ext.dcloud.net.cn/plugin?id=28](https://ext.dcloud.net.cn/plugin?id=28)
### 使用方式
页面使用需在 ``` script ``` 中引用组件
``` javascript
import hxNavbar from "@/components/hx-navbar/hx-navbar.vue"
export default {
components: {hxNavbar}
}
```
全局使用需在 ``` main.js ``` 中注册组件
``` javascript
import hxNavbar from "./components/hx-navbar/hx-navbar.vue"
Vue.component('hx-navbar',hxNavbar)
```
### 属性
#### 基本属性
| 名称 | 类型 | 默认值 | 描述 |
| ----------------------------|--------------- | ---------------------- | ---------------------------------------------------|
| back | Boolean | true | 返回上一页，（设置后，```leftIcon```属性，和```click-left```事件将失效|
| height | String | 44px | 导航栏高度（不包含状态栏高度）|
| barPlaceholder | String | auto | 导航栏占位符 显示（show），隐藏（hidden），自动（auto：如果头部为固定fixed ，则显示占位符） |
| title | String | - | 导航标题（当设置了标题，中间插槽将失效） |
| fixed | Boolean | false | 固定头部 |
| color | String | #000000 | 导航文字颜色（如果需要屏幕滑动后变色，参数则为数组，例子：`['#000000','#ffffff']`） |
| backgroundColor | Array | [255, 255, 255] | 导航背景颜色为RGB 编号（单色背景数组为```[255,255,255]```，线性渐变背景```[[236, 0, 140],[103, 57, 182],...]```） |
| backgroundColorLinearDeg | String | 45 | 导航背景线性渐变角度 |
| backgroundImg | String | - | 导航背景图片（背景图片优先级高于背景颜色） |
| transparent | String | show | 背景透明（show 不透明,hidden 透明,auto 自动：滑动逐渐显示背景颜色，当头部固定时生效） 兼容性：头条小程序必须在页面上加 onPageScroll(e){} ，才能滑动显示背景，可参考dome7|
| shadow | Boolean | false | 导航栏阴影 |
| border | Boolean | false | 导航栏边框 |
#### 关于状态栏的属性
| 名称 | 类型 | 默认值 | 描述 |
| ----------------------------|--------------- | ---------------------- | ---------------------------------------------------|
| statusBar | Boolean | true | 包含状态栏 |
| statusBarFontColor | Array,String | #000000 | 状态栏字体颜色，只支持```#000000 ```和```#FFFFFF```（如果需要屏幕滑动变色，参数则为数组，例子：```['#000000','#ffffff']```）|
| statusBarBackground | String | - | 状态栏背景颜色，如果你想单独设置状态栏颜色，该属性是个不错的选择
#### 关于插槽的属性
| 名称 | 类型 | 默认值 | 描述 |
| ----------------------------|--------------- | ---------------------- | ---------------------------------------------------|
| leftIcon | String | - | 左插槽图标，必须为 ```uni-icons``` 图标 |
| rightIcon | String | - | 右插槽图标，必须为 ```uni-icons``` 图标 |
| leftSlot | Boolean | true | 开启左插槽 |
| rightSlot | Boolean | true | 开启右插槽 |
| leftSlidiSwitch | Boolean | false | 屏幕滑动后 `left`插槽切换为`leftAfter`插槽 |
| centerSlidiSwitch | Boolean | false | 屏幕滑动后 `default`插槽切换为`centerAfter`插槽 |
| rightSlidiSwitch | Boolean | false | 屏幕滑动后 `right`插槽切换为`rightAfter`插槽 |
#### 返回上一页为空时的处理属性
| 名称 | 类型 | 默认值 | 描述 |
| ----------------------------|--------------- | ---------------------- | ---------------------------------------------------|
| backTabbarUrl | String | /pages/index/index | 返回至指定的tabber页面（返回首页），当上一页为空时生效；全局使用推荐进组件修改`backTabbarUrl`的默认值|
| defaultBackUrl | String | - | 返回至指定的普通页面，当上一页为空时生效；`defaultBackUrl`优先级高于`backTabbarUrl`；主要应用在返回失效时|
``` html
<!-- 使用场景：假如刷新了当前页面，那么返回事件将失效。
这时用上 `defaultBackUrl` 或 `backTabbarUrl` 则能返回至指定页面-->
<hx-navbar left-text="关于" defaultBackUrl="/pages/user/setting/setting" />
```
### 插槽
| 名称 | 描述 |
| ----------------------|-------------------------------------------------------------------|
| left | 左插槽 （可关闭该插槽 ```leftSlot``` 属性） |
| default | 中间插槽（当设置了标题，中间插槽将失效） |
| right | 右插槽 （可关闭该插槽 ```rightSlot``` 属性） |
| leftAfter | 屏幕滑动后的左插槽 （需要开启`leftSlidiSwitch`属性才生效） |
| centerAfter | 屏幕滑动后的中插槽 （需要开启`centerSlidiSwitch`属性才生效） |
| rightAfter | 屏幕滑动后的右插槽 （需要开启`rightSlidiSwitch`属性才生效） |
``` html
<hx-navbar>
<view>标题栏（中间插槽）</view>
<view slot="left">left（左插槽）</view>
<view slot="right">right（右插槽）</view>
</hx-navbar>
```
### 事件
| 名称 | 参数 | 描述 |
| -----------------|------------------| --------------------------|
| click-left | - | 左侧按钮点击时触发，此事件将覆盖 `返回` |
| click-right | - | 右侧按钮点击时触发 |
| scroll | - | 监听滚动条，回调参数为滚动距离；固定�
苹果CMS蓝天APP源码 v1.9.0.zip （380个子文件） 
icon.css 70KB main.css 63KB animation.css 3KB iconfont.css 2KB
info.html.tar.gz 8KB .htaccess 13B 说明.htm 4KB
info.html 48KB configcollect.html 37KB config.html 36KB info.html 30KB configurl.html 27KB info.html 27KB wizard.html 23KB info.html 18KB info.html 17KB index.html 16KB info.html 15KB configuser.html 14KB configapi.html 14KB batch.html 12KB info.html 11KB index.html 11KB info.html 11KB configplay.html 11KB configupload.html 11KB configweixin.html 10KB info.html 9KB batch.html 8KB index.html 8KB index.html 8KB info.html 8KB opt.html 8KB configcomment.html 7KB config.html 7KB configsms.html 7KB index.html 7KB index.html 7KB timing.html 7KB index.html 6KB index.html 6KB step3.html 6KB info.html 6KB index.html 6KB index.html 6KB index.html 6KB info.html 6KB index.html 5KB rep.html 5KB index.html 5KB configemail.html 5KB vod.html 5KB art.html 5KB index.html 5KB configconnect.html 5KB login.html 5KB index.html 5KB info.html 4KB actor.html 4KB index.html 4KB publish.html 4KB info.html 4KB index.html 4KB index.html 4KB index.html 4KB index.html 4KB index.html 4KB reward.html 4KB configpay.html 4KB configinterface.html 4KB index.html 4KB info.html 3KB info.html 3KB opt.html 3KB info.html 3KB index.html 3KB index.html 3KB info.html 3KB editor.html 3KB ads.html 3KB welcome.html 3KB index.html 3KB weibo.html 3KB index.html 3KB info.html 3KB sql.html 3KB export.html 3KB index.html 3KB index.html 2KB step2.html 2KB program.html 2KB import.html 2KB index.html 2KB ftp.html 2KB jump.html 2KB codepay.html 2KB index.html 2KB zhapay.html 2KB info.html 2KB upyun.html 2KB共 380 条
- 1
- 2
- 3
- 4
资源评论
