# 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 | - | 监听滚动条,回调参数为滚动距离;固定�
没有合适的资源?快使用搜索试试~ 我知道了~
2022Uniapp开发的多端影视APP+对接苹果CMS
共392个文件
php:174个
html:122个
vue:29个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 179 浏览量
2022-12-13
10:37:34
上传
评论
收藏 1.7MB ZIP 举报
温馨提示
2022苹果10CMS影视APP对接,uniapp开发的多端影视APP,本APP有缓存,投屏,播放记录,收藏等功能是非常完善的。 是会员中心也是用的苹果cms的数据,可以打包到多端的代码
资源推荐
资源详情
资源评论
收起资源包目录
2022Uniapp开发的多端影视APP+对接苹果CMS (392个子文件)
init.bat 26B
init.bat 26B
init.bat 26B
init.bat 26B
icon.css 70KB
main.css 63KB
animation.css 3KB
iconfont.css 2KB
演示.gif 720KB
info.html.tar.gz 8KB
.htaccess 13B
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
欧皇源码网.html 6KB
欧皇源码网.html 6KB
欧皇源码网.html 6KB
欧皇源码网.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
共 392 条
- 1
- 2
- 3
- 4
资源评论
现任明教教主~
- 粉丝: 366
- 资源: 314
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功